Jest.js React测试库模拟点击事件不起作用？

bfrts1fy 于 2022-12-16 发布在 Jest

关注(0)|答案(1)|浏览(421)

一个简单的测试案例：testClick.js

import React from 'react'
import { Button } from 'antd'

export default function testClick() {
  const onClick = () =>{
    console.log("2333")
  }
  return (
    <Button onClick={onClick}>testClick</Button>
  )
}

testClick.test.js

import React from 'react'
import TestClick from './testClick'
import { render, fireEvent, screen } from '@testing-library/react'
const onClick = jest.fn()
describe('partnerModal UI', () => {
  test('partnerModal UI', async () => {
    const { findByText } = await render(<TestClick />)
    const authEl = await findByText('testClick')
    await fireEvent.click(authEl)
    expect(onClick).toHaveBeenCalled()
  })
})

当我运行这个案例时，我遇到了一个错误，我感到困惑是console.log已经被调用了，但是on Search没有被调用？为什么？

jestjs

来源：https://stackoverflow.com/questions/74369722/the-react-test-library-mock-click-event-is-not-working

1条答案

按热度按时间

gopyfrb31#

您创建了一个mock onClick函数，但没有将其传递给组件并在onClick函数内部调用它，因此mock onClick函数没有被调用，这就是原因。
此外，检查模拟函数是否被调用是测试实现细节，这不是推荐的测试策略。
推荐的测试策略是测试组件的行为，当click事件发生时，组件的某些状态可能会改变，您应该检查状态改变后组件呈现了什么。
但是你提供的代码，onClick什么都没有做，只是调用console.log打印一个字符串，代码没有太大的实际意义，你唯一能做的就是Assertconsole.log是否被调用。

import React from 'react';
import TestClick from './testClick';
import { render, fireEvent, screen } from '@testing-library/react';

describe('partnerModal UI', () => {
  test('partnerModal UI', async () => {
    const logSpy = jest.spyOn(console, 'log');
    const { findByText } = await render(<TestClick />)
    const authEl = await findByText('testClick')
    await fireEvent.click(authEl)
    expect(logSpy).toHaveBeenCalled();
    logSpy.mockStore();
  })
});

赞(0）回复(0）举报 2022-12-16

我来回答

Jest.js React测试库模拟点击事件不起作用？

1条答案

相关问题

热门标签

最新问答