为什么不调用点击触发事件？

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>中定义了collectprop，然后将其传递给<button>的onClick，您基本上是说:onClick ->请打对方付费电话。

因为在你的规范中你没有发送任何要收集的<QuoteButton>，它在你的规范中没有调用。同样，因为你没有对收到的onClick做任何事情，它也没有改变什么。