jest单元测试

用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函数作为props
    const { 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();
  });
});