img 标签上的测试库/反应 fireEvent

时间:2021-03-28 13:21:36

标签: javascript html reactjs react-testing-library

如何在 上模拟 onClick 事件并检查点击后是否调用函数“clickedKitty”。这是我尝试测试的组件:

function App() {

  const { clickedKitty , ableToClickKitty } = useGame()
  

  return (
    <div className="App">
      <div className="game">
        <img src={happy} className="kitty" alt="kittyImg" onClick={ableToClickKitty ? clickedKitty : null} />
      </div>
    </div>
  );
}

export default App;

ableToClickKitty 是一个布尔对象,它是决定函数调用的条件。

这是一个明显失败的测试:

it('', () => {

        render(<App />)
        const clickedKitty = jest.fn()

         appHooks.useGame = jest.fn().mockImplementation(
            () => ({
                clickedKitty
                ableToClickKitty: true
            })
        )

        expect(clickedKitty).toHaveBeenCalledTimes(0)

        const img = screen.getByAltText('kittyImg')
        fireEvent.click(img)

        expect(clickedKitty).toHaveBeenCalledTimes(1)
    })

这是我在终端上收到的消息:

expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0

      37 |         fireEvent.click(img)
      38 |
    > 39 |         expect(clickedKitty).toHaveBeenCalledTimes(1)
         |                              ^
      

0 个答案:

没有答案