为什么不调用 click fireEvent？

Question

我正在尝试使用 onClick 属性调用模拟函数，使用 React 测试库进行测试。测试是我正在努力改进的东西，但从我目前所了解的情况来看。

我正在测试的是单击按钮时会调用一个函数，我正在渲染作为道具传递给该函数的组件（样式化组件）。

（它自己的函数是异步的，但因为我只是在嘲笑按钮上正在调用一个函数，所以我只是在使用 getBy）

测试文件

import { render, screen, fireEvent } from "@testing-library/react";
import QuoteButton from "../Components/QuoteButton";

test("fire event from QuoteButton component", () => {
    const mockCollect = jest.fn();
    render(<QuoteButton onClick={mockCollect}>get a quote</QuoteButton>);
    const buttonElement =  screen.getByRole("button", { name: /get a quote/i });
    fireEvent.click(buttonElement);
    expect(mockCollect).toHaveBeenCalledTimes(1);
  });

组件

import styled from 'styled-components'

const StyledButton = styled.button`
    cursor: pointer;
    background: transparent;
    font-size: 18px;
    border-radius: 3px;
    border-color: #f9a800;

    &:hover {
        background-color: #ff7800;
        color: #fbfbf8
    }
`
const QuoteButton = ({ children, collect }) => {
    return <StyledButton data-testid="quoteButton" onClick={collect}>{children}</StyledButton>
}

export default QuoteButton

它接到了 0 个电话，还有什么我应该寻找或测试的吗？任何帮助表示赞赏。我的理解是，因为我正在用 jest.fn() 模拟一个函数，所以一定会发生一些事情。

Answer 1

您有一个名为 collect 的道具未在您的测试中通过，而是您使用的是 onClick。

import { render, screen, fireEvent } from "@testing-library/react";
import QuoteButton from "../Components/QuoteButton";

test("fire event from QuoteButton component", () => {
    const mockCollect = jest.fn();
    {/* Wrong: QuoteButton uses 'collect' as a prop */}
    // render(<QuoteButton onClick={mockCollect}>get a quote</QuoteButton>);

    {/* Right: collect will be the prop passed to your internal component's 'onClick' */}
    render(<QuoteButton collect={mockCollect}>get a quote</QuoteButton>); // --> 
    const buttonElement =  screen.getByRole("button", { name: /get a quote/i });
    fireEvent.click(buttonElement);
    expect(mockCollect).toHaveBeenCalledTimes(1);
  });

在原始代码中，您在 <QuoteButton> 中定义了一个 collect 道具，然后将其传递给 <button> 的 onClick，你基本上是在说：onClick -> 请调用 collect 的参考。

由于在您的规范中您没有向 <QuoteButton> 发送任何要收集的东西，所以它在您的规范中没有什么可调用的。此外，由于您没有对收到的 onClick 做任何事情，它也没有任何改变。

为什么不调用 click fireEvent？

Why isn't the click fireEvent being called?

javascript

testing

reactjs

jestjs

react-testing-library