https://github.com/dtstack/ant-design-testing
https://github.com/dtstack/ant-design-testing
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/dtstack/ant-design-testing
- Owner: DTStack
- Created: 2023-06-29T08:35:16.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-20T02:55:21.000Z (about 1 year ago)
- Last Synced: 2025-06-07T03:37:29.757Z (22 days ago)
- Language: TypeScript
- Size: 334 KB
- Stars: 23
- Watchers: 16
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
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 `[email protected]` version.
```shell
$ 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`
```tsx
// setupTests.ts
import { provider } from 'ant-design-testing';
provider({ prefixCls: 'ant' });
```
```tsx
// 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.fireChange(container, 'test');
expect(fn).toBeCalled();
});
});
```
Otherwise, you can use query to find ant-design element quickly, like this
```tsx
// yourInput.test.tsx
import { input } from 'ant-design-testing';
test('query', () => {
const { container } = render(
);
const el = input.query(container, 1)
expect(el.id).toBe('test');
});
```
A simple example form demo, like this
```tsx
// your form Component
const MyForm = ({ onSubmit }: any) => {
const [form] = Form.useForm();
return (
管理员
{
onSubmit(form.getFieldsValue());
}}
>
提交
);
};
```
```tsx
// your test file
import { select, input, button } from 'ant-design-testing';
it('test MyForm', () => {
const fn = jest.fn();
const { container } = render(
);
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
```tsx
// 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');
```