学习笔记──React──集成测试

集成测试（Integration Testing）在 React 应用中至关重要，通过模拟多个组件或模块之间的交互和用户行为，可以确保整个系统的稳定性和可靠性。

结合 Jest 和 React Testing Library，可以编写高效且可靠的集成测试用例，捕捉潜在的问题并确保代码质量。

下面是关于如何在 React 应用中进行集成测试的详细指南。

选择工具

1. Jest：作为测试运行器和断言库。
2. React Testing Library：用于渲染组件和模拟用户交互。

基本设置

安装必要的依赖

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

配置 Jest

在 package.json 中添加以下 Jest 配置：

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
  }
}

在项目根目录下创建 jest.setup.js 文件：

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

编写集成测试用例

假设我们有一个简单的 React 应用，有两个组件：App 和 Counter。App 组件包含一个 Counter 组件，并传递一个 initialCount 属性。

App.js

import React from 'react';
import Counter from './Counter';
const App = () => (
  <div>
    <h1>My App</h1>
    <Counter initialCount={5} />
  </div>
);
export default App;

Counter.js

import React, { useState } from 'react';
const Counter = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};
export default Counter;

集成测试 App 和 Counter

在 __tests__ 文件夹中创建一个 App.test.js 文件：

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import App from '../App';
test('renders App component and interacts with Counter component', () => {
  const { getByText } = render(<App />);

  // Verify the App title is rendered
  expect(getByText('My App')).toBeInTheDocument();

  // Verify the Counter initial count is rendered
  expect(getByText('Count: 5')).toBeInTheDocument();

  // Increment the counter
  fireEvent.click(getByText('Increment'));
  expect(getByText('Count: 6')).toBeInTheDocument();

  // Decrement the counter
  fireEvent.click(getByText('Decrement'));
  expect(getByText('Count: 5')).toBeInTheDocument();
});

处理异步操作

如果组件中有异步操作，例如从 API 获取数据，可以使用 async/await 来处理这些操作。

假设 Counter 组件有一个按钮会从 API 获取最新的计数

Counter.js

import React, { useState } from 'react';

const Counter = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  const fetchNewCount = async () => {
    const response = await fetch('/api/new-count');
    const data = await response.json();
    setCount(data.newCount);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={fetchNewCount}>Fetch New Count</button>
    </div>
  );
};

export default Counter;

集成测试包含异步操作

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

// Mock the fetch function
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ newCount: 10 })
  })
);

test('fetches new count and updates the Counter component', async () => {
  const { getByText } = render(<App />);

  // Verify initial count
  expect(getByText('Count: 5')).toBeInTheDocument();

  // Fetch new count
  fireEvent.click(getByText('Fetch New Count'));

  // Wait for the new count to be displayed
  await waitFor(() => expect(getByText('Count: 10')).toBeInTheDocument());
});

*** 本文仅是学习中的记录，有错误请指正。 ***