[英]Test input Search box with React testing library
I have a SearchBox component:我有一个 SearchBox 组件:
function SearchBox({ search, setSearch }) {
return (
<div>
<div>
<input onChange={e => setSearch(e.target.value)} type="text" placeholder="Search..." value={search} />
</div>
</div>
)
}
I tried the following:我尝试了以下方法:
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')
})
})
But then I get an error:但后来我收到一个错误:
Error: Uncaught [TypeError: setSearch is not a function]
错误:未捕获 [TypeError: setSearch is not a function]
How and what can I test on this SearchBox component?我如何以及如何在此 SearchBox 组件上进行测试?
The issue is that setSearch
props wasn't provided.问题是没有提供
setSearch
道具。
setSearch
can be provided by jest mock function. setSearch
可以由 jest 模拟函数提供。
const setSearch = jest.fn((value) => {})
const { queryByPlaceholderText } = render(<SearchBox setSearch={setSearch}/>)
Full test code snippet:完整的测试代码片段:
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')
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.