0

ユーザーが を押したときに props をコールバックとして受け取る<InputSearch/>ラッパーとしてのコンポーネントがあります。コールバックが react-testing-library で呼び出されることをテストするにはどうすればよいですか?<input type="search">onSearchenter

テストしたいコンポーネント:

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
4

0 に答える 0