react单测

2023/3/28

# 起步

"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
复制成功
1
2
3
  • 安装
npm install --save-dev jest
复制成功
1
  • 启动
npm run test
复制成功
1

# 测试普通函数

  • 定义测试代码块,并且可以分组/嵌套
// tests/index.test.js
import React from "react";

describe("test", () => {
  test("equal", () => {
    expect(<div />).toEqual(<div />);
  });
});
复制成功
1
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

# 渲染测试

  • 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
上次更新: 6/13/2025
Powered By Valine
v1.4.16