Question

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

但是当我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 ShallowRenderer与typescript

- 更新 -

最后，我从index.test.tsx - ＆gt;更改了我的测试文件名index.test.jsx以避免tsc造成的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

如果默认导出，则只能使用import ShallowRenderer from 'react-test-renderer/shallow';。看起来它没有默认导出，因此您无法使用上述语法。您可以将其导入为

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

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

const myShallowRenderer = ShallowRenderer.createRenderer();

您可以详细了解here。

希望有所帮助：）

Answer 2

尽管文档建议使用new ShallowRenderer()，但这是利用JavaScript的“松散性”的一种方式。由于该库未使用构造函数导出某些内容，因此TypeScript编译器（正确地）对此有所抱怨。您可以使用推荐的常规导入语句：

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

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

const shallowRenderer = ShallowRenderer.createRenderer();

祝您编程愉快！ ?

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

2 个答案: