目标容器不是 DOM 元素反应测试答案

【问题标题】：Target container is not a DOM element react testing目标容器不是 DOM 元素反应测试
【发布时间】：2022-10-09 02:19:13
【问题描述】：

我在运行测试时收到此目标容器不是 DOM 元素错误。解决方案是什么？我已经在 stackoverflow 中检查了所有解决方案，但没有解决我的问题。

这是我的测试文件：

/* eslint-disable react/react-in-jsx-scope */
/* eslint-disable no-undef */
import { render, screen } from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom'
import { Provider } from 'react-redux'
import Header from '../components/header'
import store from '../redux/store'

const MockHeader = () => {
  <Router>
      <Provider store={store}>
        <Header />
      </Provider>
  </Router>
}

describe('First page', () => {
  it('render the service name', async () => {
    render(<MockHeader />);
    const headingElement = screen.getByText(/Bayawan Water District/i);
    expect(headingElement).toBeInTheDocument();
  })
})

这是我的 index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import { Provider } from 'react-redux'

import App from './App'

import store from './redux/store'
import 'bootstrap/dist/css/bootstrap.min.css'

ReactDOM.render(
  <Router>
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  </Router>,
  document.getElementById('root')
)

这是我的 header.js：

import React from 'react'
import { useParams } from 'react-router-dom'

import GetLogo from '../helpers/getLogo'
import GetHeader from '../helpers/getHeader'
import { StyledHeader, ServiceLogo, StyledTitle } from './styles/Header.styled'

function Header() {
  const params = useParams()

  return (
    <StyledHeader>
      <ServiceLogo src={GetLogo(params.svc)} alt="Logo" />
      <StyledTitle data-testid="header">{GetHeader(params.svc)} </StyledTitle>
    </StyledHeader>
  )
}

export default Header

【问题讨论】：

"我已经在stackoverflow中检查了这里的所有解决方案“：你研究了哪些？你能在问题的最后加上指向它们的链接吗？

标签： reactjs unit-testing

【解决方案1】：

在您的测试中，您是否需要在渲染调用中添加一个容器？

describe('First page', () => {
  it('render the service name', async () => {
    render(<MockHeader />); // A container argument seems to be missing here.
    const headingElement = screen.getByText(/Bayawan Water District/i);
    expect(headingElement).toBeInTheDocument();
  })
})

编辑

直接取自Reacts documentation：

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

import Hello from "./hello";

let container = null;
beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("renders with or without a name", () => {
  act(() => {
    render(<Hello />, container);
  });
  expect(container.textContent).toBe("Hey, stranger");

  act(() => {
    render(<Hello name="Jenny" />, container);
  });
  expect(container.textContent).toBe("Hello, Jenny!");

  act(() => {
    render(<Hello name="Margaret" />, container);
  });
  expect(container.textContent).toBe("Hello, Margaret!");
});

【讨论】：

【解决方案2】：

当我在发布到 npm 的组件库上升级到 React 18 时，我在 Jest 测试中遇到了同样的问题。

该问题是由升级到 .createRoot 而不是 ReactDOM.render 引起的（请参阅此处的讨论）。

当你调用 ReactDOM.render 时，React 17 看起来会立即渲染，在相比之下，React 18 没有，它只执行一次渲染工作其他代码已经完成（通常是几毫秒之后）

但是，该讨论帖上的修复并没有为我解决这个错误。事实证明，我正在从我的根 index.tsx 导入我想要测试的组件，在那里我导出了所有组件以进行汇总以构建到我的可发布库中。
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { ThemeProvider } from "./components";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

export * from "./components";
问题是我试图在 createRoot 解决之前将组件从 index.js 文件导入到我的 jest 测试中，因此在我导入时根和组件不存在。
import { RadioButtonGroup } from "../";
通过将组件导入目录，我能够解决此问题：
import { RadioButtonGroup } from "../components";

【讨论】：