React test with Jest - onChange 从不调用复选框

Question

为什么复选框上的 expect(( onChange 不起作用？

我正在尝试编写一个测试，以确保在用户更改复选框的状态时调用 onChange 函数。我是与 React 合作的新手，我看不出可能有什么问题。任何帮助和工作示例都会很好。咔嚓。

复选框.js：

import React from 'react';
function Checkbox(props) {
const { checked, onChange } = props;
return (
<input onChange={(e) => onChange(e)} checked={checked} type="checkbox" />
)
}
export default Checkbox;

Checkbox.test.js：

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import Checkbox from "./index";
let container = null;
beforeEach(() => {
// setup a DOM element as a render target
container = document.createElement("div");
document.body.appendChild(container);
});
afterEach(() => {
// cleanup on exiting
unmountComponentAtNode(container);
container.remove();
container = null;
});
it("Checkbox onChange fires", () => {
// Mock props
const props = {
onChange: jest.fn(),
checked: true
};
// Render the component
act(() => { render(<Checkbox {...props} />, container); });
// Find the component
const component = container.querySelector('input');
// onChange Checkbox
act(() => { component.dispatchEvent(new Event("change", { bubbles: true })); });
expect(props.onChange).toHaveBeenCalledTimes(1);
});

测试结果：

expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0

Answer 1

工作修复。 问题是组件"onChange"导致 React 重新渲染组件。

更改此行：

act(() => { component.dispatchEvent(new Event("change", { bubbles: true })); }

到：

await act( async() => { Simulate.change(component) });

当然，使测试成为异步函数：

it("Checkbox renders corretly", async () => {...}

修复了该问题。