用jest写修改密码的弹出框的单元测试：

import { render, fireEvent } from '@testing-library/react';
import ChangePasswordModal from './ChangePasswordModal';describe('ChangePasswordModal', () => {test('renders password input fields and save button', () => {// 渲染组件const { getByLabelText, getByText } = render(<ChangePasswordModal />);// 获取密码输入框和确认密码输入框const passwordInput = getByLabelText('Password');const confirmPasswordInput = getByLabelText('Confirm Password');// 获取保存按钮const saveButton = getByText('Save');// 断言密码输入框、确认密码输入框和保存按钮存在expect(passwordInput).toBeInTheDocument();expect(confirmPasswordInput).toBeInTheDocument();expect(saveButton).toBeInTheDocument();});test('updates password state on input change', () => {// 渲染组件const { getByLabelText } = render(<ChangePasswordModal />);// 获取密码输入框和确认密码输入框const passwordInput = getByLabelText('Password');const confirmPasswordInput = getByLabelText('Confirm Password');// 模拟输入事件fireEvent.change(passwordInput, { target: { value: 'newPassword' } });fireEvent.change(confirmPasswordInput, { target: { value: 'newPassword' } });// 断言密码输入框和确认密码输入框的值已更新expect(passwordInput.value).toBe('newPassword');expect(confirmPasswordInput.value).toBe('newPassword');});test('calls savePassword function on save button click', () => {// 创建保存密码的mock函数const savePasswordMock = jest.fn();// 渲染组件，并传入mock函数作为propsconst { getByText } = render(<ChangePasswordModal savePassword={savePasswordMock} />);// 获取保存按钮并点击const saveButton = getByText('Save');fireEvent.click(saveButton);// 断言保存密码的mock函数已被调用expect(savePasswordMock).toHaveBeenCalled();});
});

用jest写一个请求数据渲染的list：

import { render } from '@testing-library/react';
import DataList from './DataList';describe('DataList', () => {test('renders the list correctly with data', () => {const data = ['Item 1', 'Item 2'];const { getByText } = render(<DataList data={data} />);const item1 = getByText('Item 1');const item2 = getByText('Item 2');expect(item1).toBeInTheDocument();expect(item2).toBeInTheDocument();});test('displays a loading state while fetching data', () => {// 模拟异步请求数据的过程const fetchData = jest.fn(() => new Promise((resolve) => setTimeout(resolve, 1000)));// 渲染列表组件，并传入模拟的数据获取函数const { getByText } = render(<DataList fetchData={fetchData} />);// 在数据获取前，验证是否显示了加载状态const loadingText = getByText('Loading...');expect(loadingText).toBeInTheDocument();// 模拟数据获取完成return fetchData().then(() => {// 数据获取完成后，验证加载状态是否消失const loadingElement = getByText('Loading...');expect(loadingElement).not.toBeInTheDocument();});});test('displays an error message when data fetching fails', async () => {// 模拟异步请求数据的过程const fetchData = jest.fn(() => Promise.reject(new Error('Data fetching failed')));// 渲染列表组件，并传入模拟的数据获取函数const { getByText } = render(<DataList fetchData={fetchData} />);// 在数据获取前，验证是否没有显示错误消息const errorMessage = getByText('Error: Data fetching failed', { exact: false });expect(errorMessage).not.toBeInTheDocument();// 模拟数据获取失败try {await fetchData();} catch (error) {// 数据获取失败后，验证是否显示了错误消息const errorElement = getByText('Error: Data fetching failed', { exact: false });expect(errorElement).toBeInTheDocument();expect(errorElement).toHaveTextContent('Data fetching failed');}});
});

用jest写tree的单元测试：

import { render, fireEvent } from '@testing-library/react';
import TreeCom from 'xxxx';describe('Tree', () => {it('应该正确显示树节点并具有正确的交互功能', () => {const fetchData = jest.fn(() => new Promise((resolve) => () => resolve([{key: '1',title: '节点1',children: [{key: '1-1',title: '子节点1-1',},{key: '1-2',title: '子节点1-2',},],},{key: '2',title: '节点2',},])));const { getByText } = render(<TreeCom/>);const loadingText = getByText('Loading');expect(loadingText).toBeInTheDocument();await fetchData();const loadingElement = getByText('Loading');expect(loadingElement).not.toBeInTheDocument();      // 获取树节点和子节点const node1 = getByText('节点1');const node1_1 = getByText('子节点1-1');const node1_2 = getByText('子节点1-2');const node2 = getByText('节点2');// 检查树节点是否存在expect(node1).toBeInTheDocument();expect(node1_1).toBeInTheDocument();expect(node1_2).toBeInTheDocument();expect(node2).toBeInTheDocument();// 模拟点击树节点fireEvent.click(node1);// 检查点击树节点后的交互功能是否生效expect(node1_1).toHaveClass('expanded');expect(node1_2).toHaveClass('expanded');// 模拟点击子节点fireEvent.click(node1_1);// 检查点击子节点后的交互功能是否生效expect(node1_1).toHaveClass('selected');expect(node1_2).not.toHaveClass('selected');// 模拟点击另一个节点fireEvent.click(node2);// 检查点击另一个节点后的交互功能是否生效expect(node1_1).not.toHaveClass('selected');expect(node1_2).not.toHaveClass('selected');expect(node2).toHaveClass('selected');});
});

编写测试用例ts：jest实现select请求option，选值之后触发Pie的数据请求，渲染饼状图的测试用例

import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import Pie from './Pie';
import Select from './Select';describe('Pie component', () => {it('should render pie chart after selecting an option', async () => {const data = { /* mock data */ };const fetchData = jest.fn().mockResolvedValue(data);render(<><Select fetchData={fetchData} /><Pie data={data} /></>);const optionValue = 'option1';const select = screen.getByRole('combobox');fireEvent.change(select, { target: { value: optionValue } });expect(fetchData).toHaveBeenCalledWith(optionValue);const pieChartElement = screen.getByTestId('pie-chart');expect(pieChartElement).toBeInTheDocument();});
});