Question

这是一个简单的 React 组件。我将 React 测试库用于单元测试组件，但无法使用 handleClick 测试 TestComponent 的 jest.spyOn() 函数。有人可以帮忙吗？

组件

import React from 'react';

const Button = (props) => (
  <button onClick={props.handleClick}> {props.text}</button>
);

const TestComponent = () => {
  const handleClick = () => {
    console.log('clicked!');
  };
  return (
    <div>
      <Button text="Test Button" handleClick={handleClick} />
    </div>
  );
};

export default TestComponent;

测试

  it('expect spy to be called', () => {
    const { getByText } = render(<TestComponent />);
    
    const spy = jest.spyOn(TestComponent, 'handleClick');
    
    const button = getByText('Test Button');
    fireEvent.click(button);
    expect(spy).toHaveBeenCalled();
  });

我得到的错误如下。我尝试在 TestComponent.prototype 中使用 jest.spyOn 但这也无济于事。

Cannot spy the handleClick property because it is not a function; undefined given instead

Answer 1

您不能窥探 handleClick 事件处理程序，因为它是在功能范围内定义的，它是私有。

你最好测试组件行为而不是实现，比如事件处理程序内部调用了什么方法，你不应该去mock和断言这些方法是否被调用，而是发生了什么变化，比如组件发生了什么变化、UI、DOM树等

但是在您的示例中，handleClick 事件处理程序不执行任何操作，只是调用 console.log，然后您只能断言 console.log 是否被调用间接断言 {{1} }} 被调用。

handleclick

如何使用 jest.spyOn 和 React 测试库测试 React 功能组件中的函数

1 个答案: