Jest进阶知识：React组件的单元测试

在现代前端开发中，组件是构建应用程序的基本单元。一个组件不仅拥有完整的功能，还能极大地提高代码的复用性。因此，在进行单元测试时，对重要组件进行测试是必不可少的。

Testing Library

Testing Library 是一个专门用于测试 Web 组件的工具库，其设计理念是“测试组件的行为而不是实现细节”。通过 Testing Library 提供的一系列 API，可以模拟浏览器中的用户交互方式，使测试更加贴近真实使用场景。

Jest 与 Testing Library 的关系

Jest：一个完整的测试框架，提供了匹配器、mock 库、断言工具等，旨在提供一个全面的测试工具链。
Testing Library：一个测试工具库，专注于测试组件的行为。它可以与各种框架结合使用，提供了一组用于测试 React 组件的工具，如 render、screen 和 fireEvent 等。

常用的 Testing Library 扩展库

@testing-library/react：提供了一组用于测试 React 组件的工具，如 render、screen 和 fireEvent。
@testing-library/jest-dom：提供了一组 Jest 断言方法，用于测试 DOM 元素的状态和行为，如 toBeInTheDocument、toHaveTextContent 等。
@testing-library/user-event：提供了一组用于模拟用户行为的工具，如 type、click 和 tab 等。

核心 API

`render` 方法

render 方法接收一个组件作为参数，将其渲染为 DOM 元素，并返回一个包含重要属性的对象：

container：渲染后的 DOM 元素，可用于模拟用户行为或进行断言验证。
baseElement：整个文档的根元素 <html>。
asFragment：将渲染后的 DOM 元素转换为 DocumentFragment 对象，便于进行快照测试。
debug：在控制台输出渲染后的 DOM 元素的 HTML 结构，便于调试。

`screen` 对象

screen 对象封装了一系列常用的 DOM 查询和操作函数：

getByLabelText：根据 <label> 元素的 for 属性或内部文本，获取与之关联的表单元素。
getByText：根据文本内容获取元素。
getByRole：根据 role 属性获取元素。
getByPlaceholderText：根据 placeholder 属性获取表单元素。
getByTestId：根据 data-testid 属性获取元素。
queryBy*：类似于 getBy*，但当元素不存在时返回 null 而不是抛出异常。

测试组件示例

示例一：隐藏消息组件

import { useState } from "react";function HiddenMessage({ children }) {const [isShow, setIsShow] = useState(false);return (<div><label htmlFor="toggle">显示信息</label><inputtype="checkbox"name="toggle"id="toggle"checked={isShow}onChange={(e) => setIsShow(e.target.checked)}/>{isShow ? children : null}</div>);
}export default HiddenMessage;

该组件接收一个子组件，并根据复选框的状态决定是否显示子组件。以下是对应的测试代码：

import { render, screen, fireEvent } from "@testing-library/react";
import HiddenMessage from "../HiddenMessage";test("能够被勾选，功能正常", () => {const testMessage = "这是一条测试信息";render(<HiddenMessage>{testMessage}</HiddenMessage>);// 初始状态下，信息不应显示expect(screen.queryByText(testMessage)).toBeNull();// 模拟点击复选框fireEvent.click(screen.getByLabelText("显示信息"));// 信息应显示expect(screen.getByText(testMessage)).toBeInTheDocument();
});

示例二：登录组件

import * as React from "react";function Login() {const [state, setState] = React.useReducer((s, a) => ({ ...s, ...a }),{ resolved: false, loading: false, error: null });function handleSubmit(event) {event.preventDefault();const { usernameInput, passwordInput } = event.target.elements;setState({ loading: true, resolved: false, error: null });window.fetch("/api/login", {method: "POST",headers: { "Content-Type": "application/json" },body: JSON.stringify({username: usernameInput.value,password: passwordInput.value,}),}).then((r) =>r.json().then((data) => (r.ok ? data : Promise.reject(data)))).then((user) => {setState({ loading: false, resolved: true, error: null });window.localStorage.setItem("token", user.token);},(error) => {setState({ loading: false, resolved: false, error: error.message });});}return (<div><form onSubmit={handleSubmit}><div><label htmlFor="usernameInput">Username</label><input id="usernameInput" /></div><div><label htmlFor="passwordInput">Password</label><input id="passwordInput" type="password" /></div><button type="submit">Submit{state.loading ? "..." : null}</button></form>{state.error ? <div role="alert">{state.error}</div> : null}{state.resolved ? (<div role="alert">Congrats! You're signed in!</div>) : null}</div>);
}export default Login;

该组件处理用户的登录请求，根据请求结果显示不同的信息。以下是对应的测试代码：

import { rest } from "msw";
import { setupServer } from "msw/node";
import { render, screen, fireEvent } from "@testing-library/react";
import Login from "../Login";const fakeUserRes = { token: "fake_user_token" };
const server = setupServer(rest.post("/api/login", (req, res, ctx) => {return res(ctx.json(fakeUserRes));})
);// 启动服务器
beforeAll(() => server.listen());
// 关闭服务器
afterAll(() => server.close());
// 每个测试用例完成后重置服务器状态
afterEach(() => {server.resetHandlers();window.localStorage.removeItem("token");
});test("测试请求成功", async () => {render(<Login />);fireEvent.change(screen.getByLabelText(/Username/i), {target: { value: "xiejie" },});fireEvent.change(screen.getByLabelText(/Password/i), {target: { value: "123456" },});fireEvent.click(screen.getByText("Submit"));expect(await screen.findByRole("alert")).toHaveTextContent(/Congrats/i);expect(window.localStorage.getItem("token")).toEqual(fakeUserRes.token);
});test("测试请求失败", async () => {server.use(rest.post("/api/login", (req, res, ctx) => {return res(ctx.status(500), ctx.json({ message: "服务器内部出错" }));}));render(<Login />);fireEvent.change(screen.getByLabelText(/Username/i), {target: { value: "xiejie" },});fireEvent.change(screen.getByLabelText(/Password/i), {target: { value: "123456" },});fireEvent.click(screen.getByText("Submit"));expect(await screen.findByRole("alert")).toHaveTextContent(/服务器内部出错/i);expect(window.localStorage.getItem("token")).toBeNull();
});