Cao Note

外观

React 测试 ​

安装 ​

bash
npm install --save-dev @testing-library/react
npm install --save-dev @testing-library/react

示例 ​

jsx
import React from 'react'
import { fireEvent, render } from '@testing-library/react'
import Button from './Button'

const defaultProps = {
  onClick: jest.fn()
}

// describe 代表一组测试用例
describe('test Button component', () => {
  // it 是 test 的简写，一个 it 表示一个用例
  it('should render the correct default button', () => {
    const wrapper = render(<Button {...defaultProps}>Nice</Button>)
    const element = wrapper.getByText('Nice')

    expect(element).toBeInTheDocument()
    expect(element.tagName).toEqual('BUTTON')
    expect(element).toHaveClass('btn btn-default')

    fireEvent.click(element)
    expect(defaultProps.onClick).toHaveBeenCalled()
  })
})
import React from 'react'
import { fireEvent, render } from '@testing-library/react'
import Button from './Button'

const defaultProps = {
  onClick: jest.fn()
}

// describe 代表一组测试用例
describe('test Button component', () => {
  // it 是 test 的简写，一个 it 表示一个用例
  it('should render the correct default button', () => {
    const wrapper = render(<Button {...defaultProps}>Nice</Button>)
    const element = wrapper.getByText('Nice')

    expect(element).toBeInTheDocument()
    expect(element.tagName).toEqual('BUTTON')
    expect(element).toHaveClass('btn btn-default')

    fireEvent.click(element)
    expect(defaultProps.onClick).toHaveBeenCalled()
  })
})

render 返回的 API ​

API说明
getByText通过文本内容查找节点
getByTestId通过 data-testid 属性查找节点
queryByText与 getByText 类似，未找到返回 null 而不是报错

expect 断言 API ​

API说明
toBeInTheDocument验证节点在文档中
toHaveClass验证是否包含类名
toBeVisible验证元素是否可见
toHaveBeenCalled验证函数被调用
toHaveBeenCalledWith验证调用时传入的参数
not取反，如 expect(x).not.toBeVisible()

testing-library 工具方法 ​

方法说明
fireEvent模拟事件触发
render渲染组件
cleanup清除之前的渲染结果

Copyright © 2024-present xiaocao