reactjs - 带有 React 测试库的测试输入搜索框
问题描述
我有一个 SearchBox 组件:
function SearchBox({ search, setSearch }) {
return (
<div>
<div>
<input onChange={e => setSearch(e.target.value)} type="text" placeholder="Search..." value={search} />
</div>
</div>
)
}
我尝试了以下方法:
describe('Input value', () => {
it('updates on change', () => {
const { queryByPlaceholderText } = render(<SearchBox />)
const searchInput = queryByPlaceholderText('Search...')
fireEvent.change(searchInput, { target: { value: 'test' } })
expect(searchInput.value).toBe('test')
})
})
但后来我得到一个错误:
错误:未捕获 [TypeError:setSearch 不是函数]
我可以在这个 SearchBox 组件上测试什么以及如何测试?
解决方案
问题是setSearch
没有提供道具。
setSearch
可以由 jest mock 函数提供。
const setSearch = jest.fn((value) => {})
const { queryByPlaceholderText } = render(<SearchBox setSearch={setSearch}/>)
完整的测试代码片段:
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import SearchBox from './SearchBox'
import '@testing-library/jest-dom/extend-expect'
describe('Input value', () => {
it('updates on change', () => {
const setSearch = jest.fn((value) => {})
const { queryByPlaceholderText } = render(<SearchBox setSearch={setSearch}/>)
const searchInput = queryByPlaceholderText('Search...')
fireEvent.change(searchInput, { target: { value: 'test' } })
expect(searchInput.value).toBe('test')
})
})