ant-design-testing
v2.0.0
Published
Easier testing for ant-design-based UI library
Downloads
28
Readme
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 [email protected]
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');