1. 默认（default）Alert 组件，除了 title 和点击关闭时的回调函数 onClose()，其他属性都为默认

//为 Alert 组件设置属性
// AlertProps为在 Alert 组件的代码文件中给 Alert 属性定义的接口，详情参考我主页的Alert组件文章
const defaultProps: AlertProps = {
    title: 'title',
    onClose: jest.fn()
}

使用describe创建一个将几个相关测试组合在一起的模块

it: 断言

describe('test Alert component', () => {
    it('should render the correct default Alert', () => {
        const wrapper = render(<Alert {...defaultProps}/>); // 给Alert组件添加属性
        expect(wrapper.queryByText('title')).toBeInTheDocument(); // 根据 span 标签中的元素获得节点 
        expect(wrapper.container.querySelector('.fun-alert')).toHaveClass('fun-alert-default'); //根据类名获得节点 （container）
        fireEvent.click(wrapper.getByText('关闭')); // 模拟关闭按钮被点击, onClose()也会被触发
        expect(defaultProps.onClose).toHaveBeenCalled(); // 测试 onClose() 是否被触发
        expect(wrapper.queryByText('title')).not.toBeInTheDocument(); // 点击关闭按钮后 Alert 就不见了
    })
    it('should render correct Alert based on different type and description', () => {})
}）

2.测试 success 类型 Alert 组件

const testProps: AlertProps= {
    ...defaultProps,
    type: 'success',
    description: '哈哈哈',
    closable: false
}

describe('test Alert component', () => {
  it('should render correct Alert based on different type and description', () => {
        const wrapper = render(<Alert {...testProps} />)
        expect(wrapper.queryByText('title')).toHaveClass('fun-alert-title');
        expect(wrapper.container.querySelector('.fun-alert')).toHaveClass('fun-alert-success'); //测试是否为 success 类型 Alert
        expect(wrapper.queryByText('哈哈哈')).toBeInTheDocument(); // 测试是否有 description
        expect(wrapper.queryByText('关闭')).not.toBeInTheDocument(); // 测试当 closable 为 false 时是否还有关闭标签
    })
})

其他属性类似，这里就没必要在测试了

总测试代码

import React from 'react';
import { render, fireEvent, getByText } from '@testing-library/react';
import Alert, { AlertProps } from './alert';

const defaultProps: AlertProps = {
    title: 'title',
    onClose: jest.fn()
}

const testProps: AlertProps= {
    ...defaultProps,
    type: 'success',
    description: '哈哈哈',
    closable: false
}

describe('test Alert component', () => {
    it('should render the correct default Alert', () => {
        const wrapper = render(<Alert {...defaultProps}/>);
        expect(wrapper.queryByText('title')).toBeInTheDocument(); // 根据 span 标签中的元素获得节点 
        expect(wrapper.container.querySelector('.fun-alert')).toHaveClass('fun-alert-default'); //根据类名获得节点 （container）
        fireEvent.click(wrapper.getByText('关闭')); // 模拟关闭按钮被点击, onClose()也会被触发
        expect(defaultProps.onClose).toHaveBeenCalled(); // 测试 onClose() 是否被触发
        expect(wrapper.queryByText('title')).not.toBeInTheDocument(); // 点击关闭按钮后 Alert 就不见了
    })

    it('should render correct Alert based on different type and description', () => {
        const wrapper = render(<Alert {...testProps} />)
        expect(wrapper.queryByText('title')).toHaveClass('fun-alert-title');
        expect(wrapper.container.querySelector('.fun-alert')).toHaveClass('fun-alert-success'); //测试是否为 success 类型 Alert
        expect(wrapper.queryByText('哈哈哈')).toBeInTheDocument(); // 测试是否有 description
        expect(wrapper.queryByText('关闭')).not.toBeInTheDocument(); // 测试当 closable 为 false 时是否还有关闭标签
    })
})