# 起步
- api 文档 (opens new window)
- create-react-app自带单测
"@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0",
复制成功
1
2
3
2
3
- 安装
npm install --save-dev jest
复制成功
1
- 启动
npm run test
复制成功
1
# 测试普通函数
describe
test
expect
toBeCalled
toBeTruthy/toBeFalsy
not
- 定义测试代码块,并且可以分组/嵌套
// tests/index.test.js import React from "react"; describe("test", () => { test("equal", () => { expect(<div />).toEqual(<div />); }); });
复制成功
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 嵌套多组测试
import React from "react"; describe("test", () => { test("test1", () => { expect(1).toBe(1) }); describe("group", () => { test("test1", () => { expect(1).toBe(1) }); test("test2", () => { expect(2).toBe(2) }); }); });
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 渲染测试
render
toHaveTextContent
- react18会有render提示,无视就行
import React from 'react' import '@testing-library/jest-dom' import { render, screen } from '@testing-library/react' test("1", () => { const {asFragment} = render(<div>Foo</div>); expect(screen.getByText('Foo')).toBeInTheDocument() expect(asFragment()).toMatchInlineSnapshot(` <DocumentFragment> <div> Foo </div> </DocumentFragment> `) })
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
v1.4.16