我们做了个antd的测试helper库，是否有人对此感兴趣？(A testing-helper library for antd) #47171

JackWang032 · 2024-01-26T09:36:43Z

JackWang032
Jan 26, 2024

仓库地址：https://github.com/DTStack/ant-design-testing

本库为 antd 的组件提供了元素查询方法与事件触发方法，当我们想要为包含 antd 的组件进行测试时，使用该库可以很便捷的编写用例，
比如下面是个登录输入框案例：

const Login = ({ onSubmit }) => {
    const [form] = Form.useForm();
    return (
        <Form form={form}>
            <Form.Item name="username" label="用户名">
                <Input />
            </Form.Item>
            <Form.Item name="password" label="密码">
                <Input />
            </Form.Item>
            <Button
                onClick={() => {
                    onSubmit(form.getFieldsValue());
                }}
            >
                登录
            </Button>
        </Form>
    );
};

我想测试该功能，可以这样编写：

import { input, button } from "ant-design-testing";

test('test login', () => {
    const onSubmit = jest.fn();
    const { container } = render(<Login onSubmit={onSubmit}/>)
    const userNameInput = input.query(container, 0);
    const pwdInput = input.query(container, 1);
    input.fireChange(userNameInput, 'zhangsan');
    input.fireChange(pwdInput, '123');

    button.fireClick(container)

    expect(onSubmit).toHaveBeenCalledWith({username: 'zhangsan', password: '123'})
})

我们为大部分组件提供了 fire 事件与 query 查询方法，这通常在写集成测试时非常有用，您无需再去关注 antd 组件的源码实现，但目前仍有许多需要改进的地方。
对本项目感兴趣的同学，可以协助我们提相关的建议或pr，该项目目前只在我们的开源项目Taier 与产品中实践使用，还并不稳定，因此我们非常需要大家的建议！