reactjs - 如何将 react-test-renderer/shallow 与 typescript 一起使用？

Question

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

但是当我从 'react-test-renderer/shallow' 导入 ShallowRenderer 时；

tsc 给我一个错误 'Module '"/Users/dulin/workspace/react-ts-webpack2/node_modules/@types/react-test-renderer/shallow/index"' 没有默认导出。

那么，如何使用 typescriptimport ShallowRenderer

-- 更新--

最后，我将测试文件名从 index.test.tsx -> index.test.jsx 更改为避免导致的 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，您可以调用方法 ShallowRenderer.createRenderer()

const myShallowRenderer = ShallowRenderer.createRenderer();

您可以阅读更多相关信息 here .

希望对您有所帮助:)