时间戳

首页 > 解决方案 > 测试 react.js 应用程序时无法将鼠标事件发送到选定元素

javascript - 测试 react.js 应用程序时无法将鼠标事件发送到选定元素

问题描述

尝试测试带有事件处理程序的基本反应组件onClick。当通过jest.fn()测试失败时expect(myComponent).toHaveBeenCalledTimes(1)。我正在尝试通过以下方式模拟用户点击：

const button = document.querySelector("#calcButton");
button.dispatchEvent(new MouseEvent("click", { bubbles: true }));

完整代码如下。

该应用程序在 prod 和 dev 中正常document.querySelector("#calcButton").dispatchEvent(new MouseEvent("click", { bubbles: true }));工作，并在 chrome 控制台中工作。

编辑：如果我替换dispatchEvent(...)为.click(). 传入console.log("Call back activated")表明clicked回调确实被调用了。

// calculate-button.test.js
import React from "react";
import { act } from "react-dom/test-utils";
import { render, unmountComponentAtNode } from "react-dom";

import Button from "react-bootstrap/Button";
import CalculateButton from "./calculate-button";
let container = null;

beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement("div");
  document.body.appendChild(container);
});

// Omitted afterEach and some other tests. The problem occurs with them commented out.

it("fires event when clicked.", () => {
  const clicked = jest.fn();
  act(() => {
    render(<CalculateButton onClick={clicked} />, container);
  });
  const button = document.querySelector("#calcButton");
  console.log(button); // Output indictates button is being selected as hoped.
  act(() => {
    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
  });

  expect(clicked).toHaveBeenCalledTimes(1);
  // This is where the error happens.
});


//calculate-button.js
import React from "react";
import Button from "react-bootstrap/Button";

function calculateButton(props) {
  return (
    <Button
      variant="primary"
      size="lg"
      id="calcButton"
      block
      onClick={props.handleClick}
    >
      Calculate!
    </Button>
  );
}

export default calculateButton;

的结果npm test

  ● Console

    console.log src/components/calculate-button/calculate-button.test.js:36
      HTMLButtonElement {
        '__reactInternalInstance$vwtourl9fj':
         FiberNode {
           tag: 5,
           key: null,
           elementType: 'button',
           type: 'button',
           stateNode: [Circular],
           return:
...OMITTED...

  ● fires event when clicked.

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0

      39 |   });
      40 | 
    > 41 |   expect(clicked).toHaveBeenCalledTimes(1);
         |                   ^
      42 | });
      43 | 

      at Object.toHaveBeenCalledTimes (src/components/calculate-button/calculate-button.test.js:41:19)

Test Suites: 1 failed

标签： javascriptreactjsjestjs

解决方案

弄清楚了。感谢所有的帮助。

在calculate-button.js我参考onClick={props.handleClick}中，但在calculate-button.test.js我传递mockClickHandler的prop onClick. 通过更改render(<CalculateButton onClick={clicked} />, container);为render(<CalculateButton hadleClick={clicked} />, container);修复来更改不匹配。

这就是我草率命名的结果。再次感谢。

推荐阅读