ant-design-testing

ant-design-testing

Easier testing for ant-design-based UI library

This library is based on Jest and React-Testing-Library

Usage

The latest package supports antd v5.x version. If you are using antd 4.x, please install ant-design-testing@1.x version.

$ npm install ant-design-testing -D
#or
$ yarn add ant-design-testing -D
#or
$ pnpm add ant-design-testing -D

Then, modify the prefixCls if you need it, default prefixCls is ant

// setupTests.ts
import { provider } from 'ant-design-testing';

provider({ prefixCls: 'ant' });

// yourInput.test.tsx
import { input } from 'ant-design-testing';

describe("Test input's fire functions", () => {
    test('fireChange', () => {
        const fn = jest.fn();
        const { container } = render(<Input onChange={fn} />);
        input.fireChange(container, 'test');
        expect(fn).toBeCalled();
    });
});

Otherwise, you can use query to find ant-design element quickly, like this

// yourInput.test.tsx
import { input } from 'ant-design-testing';

test('query', () => {
    const { container } = render(<div>
        <Input />
        <Input id='test' />
    </div>);
    const el = input.query(container, 1)
    expect(el.id).toBe('test');
});

A simple example form demo, like this

// your form Component
const MyForm = ({ onSubmit }: any) => {
    const [form] = Form.useForm();
    return (
        <Form form={form}>
            <Form.Item name="username">
                <Input />
            </Form.Item>
            <Form.Item name="password">
                <Input type="password" />
            </Form.Item>
            <Form.Item name="role">
                <Select>
                    <Select.Option value="admin">管理员</Select.Option>
                </Select>
            </Form.Item>
            <Button
                htmlType="submit"
                onClick={() => {
                    onSubmit(form.getFieldsValue());
                }}
            >
                提交
            </Button>
        </Form>
    );
};

// your test file
import { select, input, button } from 'ant-design-testing';

it('test MyForm', () => {
    const fn = jest.fn();
    const { container } = render(
        <MyForm onSubmit={fn}/>
    );
    const userName = input.query(container)!;
    const password = input.query(container, 1)!;
    input.fireChange(userName, 'zhangsan')
    input.fireChange(password, '123456')

    select.fireOpen(container);
    select.fireSelect(document.body, 0)

    button.fireClick(container);

    expect(fn).toBeCalledWith({username: 'zhangsan', password: '123456', role: 'admin'});
});

All query methods support chain calling

// basic usage
const userName = input.query(container)!;
const password = input.query(container, 1)!;
input.fireChange(userName, 'zhangsan');
input.fireChange(password, '123456');

// chain usage
input.query(container)?.fireChange('zhangsan');
input.query(container, 1)?.fireChange('123456');

Changelog

2.0.0 (2024-06-20)

Features

• add qrCode, colorPicker, tour component (5a94e9a)
• compatible with antd v5. x (c83b45b)
• init changelog (#8) (8befd65)
• support chain calls on query functions (7efca80)

Bug Fixes

• query visible popup element only (#11) (46ba684)
• rename querySelector to querySelectorWrapper, avoid duplication with HTMLElement.querySelector (add4daf)