背景资料

我已将React开发中的单元测试方法总结为输出。
随着React开发规模的增大，我认为需要编写单元测试代码的必要性也会增大。
此外，尽管我觉得编写测试代码很麻烦，但我认为通过进行单元测试可以使后续工作更轻松。

环境建设

■ React版本：react@18.2.0

■ 反应版本：react@18.2.0

■ React版本：react@18.2.0

■ React版本：react@18.2.0

可使用以下命令创建React开发模板文件夹：
创建完文件夹后，请使用cd命令进入该文件夹。

npx create-react-app sampletest

关于默认创建的文件

■ 设置测试.js

在创建的模板中，setupTests.js文件中包含以下内容，在默认情况下导入了用于测试的库。

import '@testing-library/jest-dom';

■ App.test.js (App测试.js)

将实施测试的内容描述为“renders learn react link”，将App组件作为测试的对象。在执行测试时，将输出“renders learn react link”这个文字。

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

关于上述的学习React的内容，它指的是下述代码中App.js文件中a标签内的Learn React文字。

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

另外，通过/i来忽略大小写，我们可以确认下面的代码部分中App.js内是否包含了”Learn React”内容。默认情况下，App.js的App组件内含有”learn react”的内容，因此测试结果会成功且没有错误。

const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();

我将尝试使用以下命令进行测试。

npm test