破解 React Testing Library，征服复杂场景

2024-01-19 14:53:47

React Testing Library 实战指南：征服复杂测试场景

简介

React Testing Library (RTL) 是一款强大的工具，可帮助开发人员编写高效、可靠的 React 组件测试。在本指南中，我们将深入探讨 RTL 的高级特性，包括模拟函数注入、组件深度测试和异步测试，以帮助您解决更复杂的测试场景。

模拟函数注入

模拟函数允许您在单元测试中控制函数的行为。您可以注入一个模拟函数来跟踪函数的调用、传递给它的参数以及它的返回值。

// repeatTen.js
const repeatTen = (callback) => {
  for (let i = 0; i < 10; i++) {
    callback(i);
  }
};

// test.js
test('repeatTen', () => {
  const callback = jest.fn();
  repeatTen(callback);
  expect(callback).toHaveBeenCalledTimes(10);
});

组件深度测试

RTL 允许您测试组件的各个层级。您可以使用 findBy* 查询函数查找嵌套组件。

// UserList.js
const UserList = () => {
  return <ul><UserItem name='John'/><UserItem name='Jane'/></ul>;
};

// UserItem.js
const UserItem = ({name}) => {
  return <li>{name}</li>;
};

// test.js
test('find UserItem by name', async () => {
  const wrapper = render(<UserList/>);
  const userItem = await wrapper.findByText('Jane');
  expect(userItem).toBeInTheDocument();
});

异步测试

对于涉及异步操作的组件，RTL 提供了 waitFor 函数。它暂停测试，直到异步任务完成。

// fetchData.js
const fetchData = async () => {
  const response = await fetch('https://example.com/api/data');
  return response.json();
};

// test.js
test('data fetching', async () => {
  const wrapper = render(<DataFetcher/>);
  await waitFor(() => {
    expect(wrapper.getByText('Loaded data')).toBeInTheDocument();
  });
});