如何在typescript中使用react-test-renderer/shallow？

Question

我想使用react-test-renderer/shallow来测试我的react组件。

但是当我import ShallowRenderer from 'react-test-renderer/shallow';的时候

tsc给我一个错误'Module '"/Users/dulin/workspace/react-ts-webpack2/node_modules/@types/react-test-renderer/shallow/index"' has no default export.

那么，如何使用typescript import ShallowRenderer呢？

-更新--

最后，我将测试文件名改为index.test.tsx -> index.test.jsx，以避免definition导致的tsc错误。

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

只有在默认导出的情况下，才能使用import ShallowRenderer from 'react-test-renderer/shallow';。它看起来不是默认导出的，所以你不能使用上面的语法。您可以将其导入为

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

现在，您可以调用ShallowRenderer.createRenderer()方法来创建ShallowRenderer

const myShallowRenderer = ShallowRenderer.createRenderer();

你可以阅读更多关于它的here。

希望它能有所帮助:)

Answer 2

尽管文档建议使用new ShallowRenderer()，但这在某种程度上利用了JavaScript的“松散”特性。由于该库没有使用构造函数导出内容，因此TypeScript编译器(理所当然)会对此进行抱怨。您可以使用推荐的常规import语句：

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

然后，只需调用createRenderer函数来获取实例，而不是使用new关键字。

const shallowRenderer = ShallowRenderer.createRenderer();

祝您编码愉快！?