附录 2：Testing Library 组件测试基础
The more your tests resemble the way your software is used, the more confidence they can give you.
import { render } from '@testing-library/react'
test('should show h1 title', () => {
// given
const comp = render(<App />)
// when
const result = comp.getByTestId('title').textContent
// then
expect(result).toBe('练功房前端脚手架')
})
getByLabelText
getByPlaceholderText
getByText
getByDisplayValue
getByAltText
getByTitle
getByRole
getByTestId
type | No Match | 1 Match | 1+ Match | Await? |
getBy | throw | return | throw | No |
findBy | throw | return | throw | Yes |
queryBy | null | return | throw | No |
getAllBy | throw | array | array | No |
findAllBy | throw | array | array | Yes |
queryAllBy | [] | array | array | No |
import { render } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
test('should calculate result by input number', () => {
const comp = render(<App />)
userEvent.type(comp.getByTestId('input-number'), '15')
expect(wrapper.getByTestId('number-result').textContent).toBe('FizzBuzz')
})
最近更新 2yr ago