How to use react-test-renderer/shallow with typescript?

Question

I want to use react-test-renderer/shallow to test my react component.

But when I import ShallowRenderer from 'react-test-renderer/shallow';

tsc give me an error 'Module '"/Users/dulin/workspace/react-ts-webpack2/node_modules/@types/react-test-renderer/shallow/index"' has no default export.

So, How to import ShallowRenderer with typescript

-- update --

finally, I change my test filename from index.test.tsx -> index.test.jsx to avoid the tsc error caused by definition.

import * as React from 'react';
import * as TestUtils from 'react-dom/test-utils';
import * as ShallowRenderer from 'react-test-renderer/shallow';
import PanelHead from '../';

describe('PanelHead test suites', () => {

  it('t-1', () => {

    const renderer = new ShallowRenderer();
    renderer.render(<PanelHead />)
    const result = renderer.getRenderOutput();

    expect(result.type).toBe('div');

  });

});

Hardik Modha · Accepted Answer · 2018-10-05 04:09:07Z

14

You can only use import ShallowRenderer from 'react-test-renderer/shallow'; if it is default exported. It looks like it is not default exported so that you can't use the above syntax. You can import it as

import * as ShallowRenderer from 'react-test-renderer/shallow';

Now, to create a ShallowRenderer you can call the method ShallowRenderer.createRenderer()

const myShallowRenderer = ShallowRenderer.createRenderer();

You can read more about it here.

Hope it helps :)

edited Oct 5, 2018 at 4:09

answered Jul 12, 2017 at 2:39

Hardik Modha

12.8k3 gold badges40 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lin Du Over a year ago

yes, it works. but there is a new problem, Cannot use 'new' with an expression whose type lacks a call or construct signature.

Lin Du Over a year ago

I guess the react-test-renderer lack some definitions. so, to avoid the tsc type check, I change my test filename from *.test.tsx to *.test.jsx

Hardik Modha Over a year ago

Looking at the definitions, You need to call the function createRenderer to create the get the ShallowRenderer. So you can do ShalloRenderer.createRenderer()

Jim · Accepted Answer · 2019-12-28 16:06:16Z

0

Although the docs recommend using new ShallowRenderer(), this is in a way taking advantage of the "looseness" of JavaScript. Since the library is not exporting something with a constructor, the TypeScript compiler (rightfully) complains about it. You can use the regular recommended import statement:

import ShallowRenderer from 'react-test-renderer/shallow';

and then instead of using the new keyword just call the createRenderer function to get an instance.

const shallowRenderer = ShallowRenderer.createRenderer();

Happy coding! 👍

answered Dec 28, 2019 at 16:06

Jim

4,3211 gold badge34 silver badges64 bronze badges

Collectives™ on Stack Overflow

How to use react-test-renderer/shallow with typescript?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related