0

我有一个<InputSearch/>组件作为包装器,当用户按下时<input type="search">接收onSearch道具作为回调enter。我如何测试回调是否会被 react-testing-library 调用?

我要测试的组件:

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