React 测试失败，因为目标容器不是 DOM 元素

Question

我正在尝试运行组件测试，但测试器一直失败，因为目标容器不是 DOM 元素。我找到了一个建议从 index.tsx 中删除导出值的答案，但它没有解决问题。

src/Component/__tests__/FirstPage.test.tsx
  ● Test suite failed to run

    Target container is not a DOM element.

       8 | export const socket = io('http://localhost:8080');  
       9 | 
    > 10 | ReactDOM.render(
         |          ^
      11 |   <React.StrictMode>
      12 |     <App/>
      13 |   </React.StrictMode>,

      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26091:13)

这是我的 App.tsx 文件

import React, { Component } from "react";
import './App.css';
import FirstPage from './Component/FirstPage/FirstPage';

export default class App extends Component {

  render() {
    return (
      <FirstPage/>
    );
  }
}

这是 index.tsx 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import io from 'socket.io-client';
import App from './App';
import reportWebVitals from './reportWebVitals';

export const socket = io('http://localhost:8080');

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint
reportWebVitals();

这是测试

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import FirstPage from '../FirstPage/FirstPage';
import User from '../User/User';

const testUser = new User("testUser", "id")



test('Test if FirstPage includes enter lobby button', () => {

    render(<FirstPage/>);
    const textElement= screen.getByText(/Enter Lobby!s/i);
    expect(textElement).toBeInTheDocument();
});

这是我的 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000"/>

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
  This HTML file is a template.
  If you open it directly in the browser, you will see an empty page.

  You can add webfonts, meta tags, or analytics to this file.
  The build step will place the bundled scripts into the <body> tag.

  To begin the development, run `npm start` or `yarn start`.
  To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Answer 1

编辑

在你的项目上花了一些时间后，我发现了导致你的测试出现这个问题的原因。在 FirstPage 使用的某些组件中，您正在像那样导入套接字

import { socket } from "../.."

由于路径错误，这导致了测试中的意外行为。

为了解决这个问题，我从 index.tsx 中导出了套接字并将其放入 App.tsx 中，无论您需要导入它，您都可以像这样点亮

import { socket } from "../../App"

这解决了测试问题。此外，上述改进仍然适用于更简洁的代码。

首先，在您的 App.tsx 中，您正在导入 FirstPage 并将其命名为 Greeting，但随后您在 returning FirstPage零件。您需要 return Greeting 或将导入重命名为 FirstPage。此外，您需要导入 React 才能使代码正常工作。即使您没有明确使用 React，您仍然需要导入它，因为 JSX 被压缩为 React.createElement()，它使用 React.

// App.tsx
import React, { Component } from "react";
import FirstPage from "./Component/FirstPage/FirstPage";

export default class App extends Component {
  render() {
    return <FirstPage />;
  }
}

继续您的测试，将所有测试放在 __tests__ 文件夹中是一个很好的做法。此外，看起来您实际上并没有导入 FirstPage 然后尝试使用它。尝试导入它并运行根据 App.tsx.

中建议的更改再次测试

// /Components/FirstPage/__tests__/FirstPage.test.tsx
import React from "react";
import { render, screen } from "@testing-library/react";
import FirstPage from '../FirstPage';

test("Test if FirstPage includes enter lobby button", () => {
  render(<FirstPage />);
  ...
});

我已经在 codesandbox 中试过了，测试成功了。

React 测试失败，因为目标容器不是 DOM 元素

React test fails becasue target container is not a DOM element

typescript

reactjs

create-react-app

react-testing-library