{"id":28560117,"url":"https://github.com/dtstack/ant-design-testing","last_synced_at":"2025-06-25T12:36:03.889Z","repository":{"id":177228873,"uuid":"660097808","full_name":"DTStack/ant-design-testing","owner":"DTStack","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-20T02:55:21.000Z","size":342,"stargazers_count":23,"open_issues_count":2,"forks_count":2,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-06-07T03:37:29.757Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DTStack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-29T08:35:16.000Z","updated_at":"2025-03-21T16:56:58.000Z","dependencies_parsed_at":"2024-01-30T00:01:28.161Z","dependency_job_id":"2f046fb0-f479-4586-b5cb-eb1b79bd5b6c","html_url":"https://github.com/DTStack/ant-design-testing","commit_stats":null,"previous_names":["dtstack/ant-design-testing"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fant-design-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fant-design-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fant-design-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fant-design-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DTStack","download_url":"https://codeload.github.com/DTStack/ant-design-testing/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fant-design-testing/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259043770,"owners_count":22797163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-10T09:07:33.239Z","updated_at":"2025-06-10T09:07:34.612Z","avatar_url":"https://github.com/DTStack.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003eant-design-testing\u003c/div\u003e\n\n_Easier testing for ant-design-based UI library_\n\nThis library is based on `Jest` and `React-Testing-Library`\n\n## Usage\n\nThe latest package supports antd v5.x version.\nIf you are using antd 4.x, please install `ant-design-testing@1.x` version.\n\n```shell\n$ npm install ant-design-testing -D\n#or\n$ yarn add ant-design-testing -D\n#or\n$ pnpm add ant-design-testing -D\n```\n\nThen, modify the prefixCls if you need it, default prefixCls is `ant`\n\n```tsx\n// setupTests.ts\nimport { provider } from 'ant-design-testing';\n\nprovider({ prefixCls: 'ant' });\n```\n\n```tsx\n// yourInput.test.tsx\nimport { input } from 'ant-design-testing';\n\ndescribe(\"Test input's fire functions\", () =\u003e {\n    test('fireChange', () =\u003e {\n        const fn = jest.fn();\n        const { container } = render(\u003cInput onChange={fn} /\u003e);\n        input.fireChange(container, 'test');\n        expect(fn).toBeCalled();\n    });\n});\n```\n\nOtherwise, you can use query to find ant-design element quickly, like this\n```tsx\n// yourInput.test.tsx\nimport { input } from 'ant-design-testing';\n\ntest('query', () =\u003e {\n    const { container } = render(\u003cdiv\u003e\n        \u003cInput /\u003e\n        \u003cInput id='test' /\u003e\n    \u003c/div\u003e);\n    const el = input.query(container, 1)\n    expect(el.id).toBe('test');\n});\n```\n\nA simple example form demo, like this\n```tsx\n// your form Component\nconst MyForm = ({ onSubmit }: any) =\u003e {\n    const [form] = Form.useForm();\n    return (\n        \u003cForm form={form}\u003e\n            \u003cForm.Item name=\"username\"\u003e\n                \u003cInput /\u003e\n            \u003c/Form.Item\u003e\n            \u003cForm.Item name=\"password\"\u003e\n                \u003cInput type=\"password\" /\u003e\n            \u003c/Form.Item\u003e\n            \u003cForm.Item name=\"role\"\u003e\n                \u003cSelect\u003e\n                    \u003cSelect.Option value=\"admin\"\u003e管理员\u003c/Select.Option\u003e\n                \u003c/Select\u003e\n            \u003c/Form.Item\u003e\n            \u003cButton\n                htmlType=\"submit\"\n                onClick={() =\u003e {\n                    onSubmit(form.getFieldsValue());\n                }}\n            \u003e\n                提交\n            \u003c/Button\u003e\n        \u003c/Form\u003e\n    );\n};\n```\n```tsx\n// your test file\nimport { select, input, button } from 'ant-design-testing';\n\nit('test MyForm', () =\u003e {\n    const fn = jest.fn();\n    const { container } = render(\n        \u003cMyForm onSubmit={fn}/\u003e\n    );\n    const userName = input.query(container)!;\n    const password = input.query(container, 1)!;\n    input.fireChange(userName, 'zhangsan')\n    input.fireChange(password, '123456')\n\n    select.fireOpen(container);\n    select.fireSelect(document.body, 0)\n\n    button.fireClick(container);\n\n    expect(fn).toBeCalledWith({username: 'zhangsan', password: '123456', role: 'admin'});\n});\n```\nAll query methods support chain calling\n```tsx\n// basic usage\nconst userName = input.query(container)!;\nconst password = input.query(container, 1)!;\ninput.fireChange(userName, 'zhangsan');\ninput.fireChange(password, '123456');\n\n// chain usage\ninput.query(container)?.fireChange('zhangsan');\ninput.query(container, 1)?.fireChange('123456');\n\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtstack%2Fant-design-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdtstack%2Fant-design-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtstack%2Fant-design-testing/lists"}