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

【问题标题】：React Typescript tests - Target container is not a DOM elementReact Typescript 测试 - 目标容器不是 DOM 元素
【发布时间】：2020-09-28 14:12:12
【问题描述】：

我是测试 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);

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

我尝试将history 和store 提取到单独的文件中（如评论者所建议的那样）。现在上面的代码在src/initialState.ts里面。

好消息：“目标容器不是 DOM 元素”错误消失了！
坏消息：我收到一个新错误（这可能是一个独立的问题，因此提取到 separate question）

【问题讨论】：

看起来你在声明Feature....
好像有什么东西试图渲染你的index.tsx....
@DanielA.White 抱歉，已将 Feature 更改为 feature 有问题。
您目前正在寻找什么来测试？通常，您不会测试将您的应用程序呈现给 dom 的 index.ts。您可以在 React.render 方法中测试所有内容，因为这也将在您的测试中发生。测试中的 react 组件将被渲染到一个虚拟 dom。
@DanielA.White 在问题底部添加了详细信息。

标签： reactjs typescript react-test-renderer

【解决方案1】：

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

确保不要从 index.tsx 导入任何内容，并将您在此处定义的逻辑移动到单独的文件中。

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

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

当您测试您的组件时，您要确保它不包含ReactDOM.render，因为您在测试时所做的是在虚拟 dom 中呈现被测组件，不幸的是这与 @987654335 冲突@

我提供了一个示例，说明如何在 codesandbox 中设置类似的内容

现在我更喜欢使用@testing-library/react 测试组件，而不是react-test-renderer，react-test-renderer 也已成为使用create-react-app 的默认测试库。

【讨论】：