React Typescript 测试 - 目标容器不是 DOM 元素

Question

我是测试 React/Typescript 个应用程序的新手。

命令（react-scripts test 的别名）：

yarn test

输出：

 FAIL  src/containers/pages/Feature/Feature.test.tsx
  ● Test suite failed to run

    Target container is not a DOM element.

      17 | const { store, persistor } = configureStore(history, initialState);
      18 | 
    > 19 | ReactDOM.render(
         |          ^
      20 |   <Provider store={store}>
      21 |     <PersistGate loading={null} persistor={persistor}>
      22 |       <ConnectedRouter history={history}>

      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:27596:13)
      at Object.render (src/index.tsx:19:10)

简单测试代码：

import * as React from 'react';
import { create } from 'react-test-renderer';
import Feature from "./Feature";

describe('Feature page component', () => {
  test('matches the snapshot', () => {
    const feature = create(
      <Feature />,
    );
    expect(feature.toJSON()).toMatchSnapshot();
  });
});

src/index.tsx 文件实际上包含 ReactDOM.render() 在测试中失败的调用，但是什么是可行的替代方案？

注意：应用本身运行良好，只是在测试模式下运行失败。

在 src/index.tsx 文件中我有：

export const history = createBrowserHistory({
  basename: '/admin',
});
const initialState: StoreState = (undefined as unknown) as StoreState;
const { store, persistor } = configureStore(history, initialState);

然后在服务和传奇中我从 index.tsx 导入 history 和 store。可能是导致测试失败的问题？

我试图将 history 和 store 提取到一个单独的文件中（按照评论者的建议）。现在上面的代码在 src/initialState.ts.

里面

好消息：错误 "Target container is not a DOM element" 消失了！
坏消息：我得到一个新的错误（这可能是一个独立的问题，所以提取到 separate question）

Answer 1

您的测试中现在出现的问题是您想要测试一个从 index.tsx 导入某些内容的组件。当您从 index.tsx 导入时，也会调用 ReactDOM.render 并且您的测试失败。

Ensure to not import anything from index.tsx and move your logic you've defined there in a separate file.

一般来说，您的应用程序会有一个索引文件，例如：index.tsx 导入您的 App.tsx 并且只关心将 React 组件渲染到 dom 和 ReactDOM.render.

在 App.tsx 中，您可以定义所有组件，例如 Provider、PersistGate，甚至 Feature

当您测试您的组件时，您希望确保它不包含 ReactDOM.render，因为您在测试时正在做的是在虚拟 [=40= 中呈现被测组件] 不幸的是，这与 ReactDOM.render

冲突

我已经提供了一个示例，说明如何在 codesandbox

中设置类似的内容

现在我更喜欢使用 @testing-library/react 来测试组件，而不是 react-test-renderer 这也已成为使用 create-react-app.

的默认测试库

React Typescript 测试 - 目标容器不是 DOM 元素

React Typescript tests - Target container is not a DOM element

typescript

reactjs

react-test-renderer