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');

  });

});

Answer 1

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 :)