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

IT技术 reactjs typescript
2021-05-15 18:15:10

我想用来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.

那么,如何import ShallowRenderertypescript

- 更新 -

最后,我将我的测试文件名从index.test.tsx->更改index.test.jsx为避免tscdefinition.

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

  });

});
2个回答

您只能import ShallowRenderer from 'react-test-renderer/shallow';在默认导出时使用。看起来它不是默认导出的,因此您无法使用上述语法。您可以将其导入为

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

现在,要创建一个ShallowRenderer您可以调用该方法ShallowRenderer.createRenderer()

const myShallowRenderer = ShallowRenderer.createRenderer();

您可以在此处阅读更多相关信息

希望能帮助到你 :)

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

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

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

const shallowRenderer = ShallowRenderer.createRenderer();

快乐编码!👍