React学习教程，从入门到精通，React 单元测试：语法知识点及使用方法详解(30）

React 单元测试：语法知识点及使用方法详解

本文将详细介绍 React 单元测试的各个关键知识点，包括 Jest 和 React Testing Library 的使用，并提供详细的代码示例和注释，帮助您全面掌握 React 单元测试的各个方面。

---

1. Jest 简介及环境搭建

Jest 是由 Facebook 开发的 JavaScript 测试框架，广泛用于 React 应用的单元测试。它具有零配置、快速运行、丰富的匹配器等特点。

1.1 安装 Jest

首先，确保您已经安装了 Node.js 和 npm。然后，在项目根目录下运行以下命令来安装 Jest：

npm install --save-dev jest

1.2 配置 package.json

在 package.json 中添加测试脚本：

{
  "scripts": {
    "test": "jest"
  }
}

1.3 初始化 Jest 配置（可选）

运行以下命令生成 jest.config.js 配置文件：

npx jest --init

根据提示选择适合的配置选项。

---

2. 匹配器方法（Matchers）

Jest 提供了丰富的匹配器，用于断言测试结果。以下是一些常用的匹配器及其用法。

2.1 基本匹配器

test('基本匹配器示例', () => {
  const a = 1;
  const b = 1;

  // 相等
  expect(a).toBe(b);

  // 不相等
  expect(a).not.toBe(null);

  // 数值比较
  expect(a).toBeGreaterThan(0);
  expect(a).toBeLessThan(2);

  // 浮点数比较
  const floatA = 0.1;
  const floatB = 0.2;
  expect(floatA + floatB).toBeCloseTo(0.3);
});

2.2 布尔值匹配器

test('布尔值匹配器示例', () => {
  const isActive = true;

  // 断言为真
  expect(isActive).toBeTruthy();

  // 断言为假
  expect(!isActive).toBeFalsy();
});

2.3 对象匹配器

test('对象匹配器示例', () => {
  const obj = { a: 1, b: 2 };

  // 断言对象包含特定属性
  expect(obj).toHaveProperty('a', 1);

  // 断言对象等于另一个对象
  expect(obj).toEqual({ a: 1, b: 2 });
});

2.4 数组匹配器

test('数组匹配器示例', () => {
  const arr = [1, 2, 3];

  // 断言数组包含特定元素
  expect(arr).toContain(2);

  // 断言数组长度
  expect(arr).toHaveLength(3);
});

---

3. 模拟函数（Mock Functions）

模拟函数用于测试函数调用情况，如调用次数、参数等。

3.1 创建模拟函数

test('模拟函数示例', () => {
  const mockCallback = jest.fn(x => x * 2);

  [1, 2, 3].forEach(mockCallback);

  // 断言模拟函数被调用了三次
  expect(mockCallback.mock.calls).toHaveLength(3);

  // 断言第一次调用参数为1
  expect(mockCallback.mock.calls[0][0]).toBe(1);

  // 断言返回值
  expect(mockCallback.mock.results[0].value).toBe(2);
});

3.2 模拟模块

假设有一个模块 math.js：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

测试代码：

// math.test.js
import { add, subtract } from './math';

jest.mock('./math', () => ({
  add: jest.fn(),
  subtract: jest.fn(),
}));

test('模拟模块示例', () => {
  add.mockImplementation((a, b) => a + b);
  subtract.mockImplementation((a, b) => a - b);

  expect(add(2, 3)).toBe(5);
  expect(subtract(5, 2)).toBe(3);
});

---

4. 异步代码测试

Jest 支持对异步代码进行测试，包括 Promise 和 async/await。

4.1 使用 done 回调

test('异步测试示例 - done', (done) => {
  function fetchData(callback) {
    setTimeout(() => {
      callback('Hello');
    }, 1000);
  }

  fetchData((data) => {
    expect(data).toBe('Hello');
    done();
  });
});

4.2 使用 Promise

test('异步测试示例 - Promise', () => {
  function fetchData() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('Hello');
      }, 1000);
    });
  }

  return fetchData().then(data => {
    expect(data).toBe('Hello');
  });
});

4.3 使用 async/await

test('异步测试示例 - async/await', async () => {
  function fetchData() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('Hello');
      }, 1000);
    });
  }

  const data = await fetchData();
  expect(data).toBe('Hello');
});

---

5. 钩子（Hooks）

Jest 提供了 beforeEach, afterEach, beforeAll, afterAll 等钩子，用于在测试前后执行代码。

5.1 beforeEach 和 afterEach

let counter = 0;

beforeEach(() => {
  counter = 0;
});

afterEach(() => {
  console.log('测试结束，counter:', counter);
});

test('beforeEach 和 afterEach 示例', () => {
  counter += 1;
  expect(counter).toBe(1);
});

test('另一个测试', () => {
  counter += 2;
  expect(counter).toBe(2);
});

5.2 beforeAll 和 afterAll

let setupData;

beforeAll(() => {
  setupData = { a: 1, b: 2 };
  console.log('设置数据:', setupData);
});

afterAll(() => {
  console.log('清理数据');
});

test('beforeAll 和 afterAll 示例', () => {
  expect(setupData.a).toBe(1);
});

---

6. 快照测试（Snapshot Testing）

快照测试用于确保 UI 组件在不期望的情况下不会发生变化。

6.1 创建快照

import React from 'react';
import renderer from 'react-test-renderer';
import MyComponent from './MyComponent';

test('快照测试示例', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});

首次运行测试时，Jest 会生成一个快照文件 __snapshots__/MyComponent.test.js.snap。后续测试会与该快照进行比较。

6.2 更新快照

当组件发生变化且预期变化时，可以使用 --updateSnapshot 参数更新快照：

jest --updateSnapshot

---

7. DOM 测试工具

7.1 react-testing-library

react-testing-library 是一个用于测试 React 组件的库，侧重于测试组件的行为而非实现细节。

7.1.1 安装

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

7.1.2 使用示例

// MyComponent.js
import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button>Click Me</button>
    </div>
  );
};

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import MyComponent from './MyComponent';

test('渲染组件并点击按钮', () => {
  render(<MyComponent />);

  // 断言标题存在
  const heading = screen.getByText(/hello, world!/i);
  expect(heading).toBeInTheDocument();

  // 模拟点击按钮
  const button = screen.getByText(/click me/i);
  fireEvent.click(button);

  // 这里可以添加更多断言，例如按钮点击后的行为
});

7.2 Enzyme

Enzyme 是由 Airbnb 开发的 React 组件测试工具，提供了浅渲染（shallow rendering）和完全渲染（full rendering）等功能。

7.2.1 安装

npm install --save-dev enzyme enzyme-adapter-react-16

注意：根据您使用的 React 版本选择合适的 Enzyme Adapter。

7.2.2 配置 Enzyme

// setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

在 package.json 中添加：

{
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/setupTests.js"]
  }
}

7.2.3 使用示例

// MyComponent.js
import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button>Click Me</button>
    </div>
  );
};

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

test('Enzyme 渲染组件并点击按钮', () => {
  const wrapper = shallow(<MyComponent />);

  // 断言标题存在
  const heading = wrapper.find('h1');
  expect(heading.text()).toBe('Hello, World!');

  // 模拟点击按钮
  const button = wrapper.find('button');
  button.simulate('click');

  // 这里可以添加更多断言，例如按钮点击后的行为
});

---

8. 综合案例

8.1 使用 react-testing-library 测试计数器组件

8.1.1 组件代码

// Counter.js
import React, { useState } from 'react';

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

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

export default Counter;

8.1.2 测试代码

// Counter.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Counter from './Counter';

test('计数器组件测试', () => {
  render(<Counter />);

  // 断言初始计数为0
  const countElement = screen.getByText(/count:/i);
  expect(countElement).toHaveTextContent('Count: 0');

  // 模拟点击 Increment 按钮
  const incrementButton = screen.getByText(/increment/i);
  fireEvent.click(incrementButton);

  // 断言计数变为1
  expect(countElement).toHaveTextContent('Count: 1');

  // 模拟点击 Decrement 按钮
  const decrementButton = screen.getByText(/decrement/i);
  fireEvent.click(decrementButton);

  // 断言计数回到0
  expect(countElement).toHaveTextContent('Count: 0');
});

8.2 使用 Enzyme 测试 Redux 组件

8.2.1 Redux 配置

// store.js
import { createStore } from 'redux';

const initialState = {
  count: 0,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

8.2.2 组件代码

// ConnectedCounter.js
import React from 'react';
import { connect } from 'react-redux';

const ConnectedCounter = ({ count, dispatch }) => {
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

const mapStateToProps = (state) => ({
  count: state.count,
});

export default connect(mapStateToProps)(ConnectedCounter);

8.2.3 测试代码

// ConnectedCounter.test.js
import React from 'react';
import { shallow } from 'enzyme';
import ConnectedCounter from './ConnectedCounter';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';

const middlewares = [];
const mockStore = configureStore(middlewares);

test('Redux 计数器组件测试', () => {
  const initialState = { count: 0 };
  const store = mockStore(initialState);

  const wrapper = shallow(
    <Provider store={store}>
      <ConnectedCounter />
    </Provider>
  );

  // 断言计数显示为0
  const countElement = wrapper.find('h1');
  expect(countElement.text()).toBe('Count: 0');

  // 模拟点击 Increment 按钮
  const incrementButton = wrapper.find('button').at(0);
  incrementButton.simulate('click');

  // 断言 Redux action 被正确分发
  const actions = store.getActions();
  expect(actions).toEqual([{ type: 'INCREMENT' }]);

  // 更新组件状态
  wrapper.update();

  // 断言计数显示为1
  expect(countElement.text()).toBe('Count: 1');
});

---

9. 本章小结

本文详细介绍了 React 单元测试的各个方面，包括：

• Jest 的基础语法和匹配器方法。
• 模拟函数 的使用。
• 异步代码测试 的不同方法。
• 钩子 的使用。
• 快照测试 的概念和应用。
• React Testing Library 和 Enzyme 的使用。
• 综合案例 展示了如何测试不同类型的 React 组件。

通过掌握这些知识点，您将能够有效地编写和运行 React 单元测试，确保应用程序的可靠性和稳定性。