时间戳

首页 > 解决方案 > 使用 Jest 进行反应测试 - onChange 从未调用过 Checkbox

javascript - 使用 Jest 进行反应测试 - onChange 从未调用过 Checkbox

问题描述

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

我正在尝试编写一个测试以确保当用户更改复选框的状态时调用 onChange 函数。我是使用 React 与 Jest 一起工作的新手，我看不出有什么问题。任何帮助和工作示例都会很好。肿瘤坏死因子。

复选框.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

标签： javascriptreactjsjestjscreate-react-apponchange

解决方案

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

更改此行：

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

进入：

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

当然，使测试成为异步功能：

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

解决了这个问题。

推荐阅读