ユーザーが を押したときに props をコールバックとして受け取る<InputSearch/>
ラッパーとしてのコンポーネントがあります。コールバックが react-testing-library で呼び出されることをテストするにはどうすればよいですか?<input type="search">
onSearch
enter
テストしたいコンポーネント:
const Search = ({ className, onSearch, placeholder }) => {
const [searchValue, setSearchValue] = useState('')
const handleChange = e => {
setSearchValue(e.target.value)
}
const search = (value, e) => {
onSearch(value)
}
return (
<SearchInput
data-testid="search-input"
placeholder={placeholder}
onChange={handleChange}
onSearch={search}
/>
)
}
私が試してみました:
describe('Search', () => {
const fakeOnSearch = jest.fn()
const fakeProps = {
className: 'fake-class-name',
onSearch: fakeOnSearch,
placeholder: 'fakesearch'
}
const { getByTestId, getByText, getByPlaceholderText } = render(<Search {...fakeProps} />)
const node = getByTestId('search-input')
afterEach(cleanup)
it('calls onSearch callback', () => {
fireEvent.keyPress(node, { key: "Enter", code: 13, charCode: 13 })
expect(fakeOnSearch).toBeCalledTimes(1)
})
})
テスト結果:
expect(jest.fn()).toBeCalledTimes(1)
Expected mock function to have been called one time, but it was called zero times