测试是否已使用 Jest 调用了 React prop 方法

Question

我有一个 Input 组件，它接受一个 prop 方法并在用户输入内容时调用它。代码本身按预期工作，但由于某些原因，测试失败。它认为没有调用 prop 方法。为什么会这样？出于测试目的，我使用 Jest 和 react-testing-library。

第二个问题。在实际应用中，我的想法是测试传递给该 prop 方法的参数。是否认为是实现测试（我知道我应该测试它）？

Input.js

export default function Input({ onChange }) {
  return <input onChange={onChange} />;
}

测试

import React from "react";
import { render, act, cleanup, fireEvent } from "react-testing-library";
import Input from "./input";

describe("Input tests", () => {
  afterEach(cleanup);

  it("Should call prop function", () => {
    const onChange = jest.fn();
    const { getByTestId } = render(<Input onChange={onChange} />);
    const input = getByTestId("input");

    act(() => {
      fireEvent.change(input, { target: { value: "Q" } });
    });

    expect(onChange).toHaveBeenCalled();
  });
});

https://codesandbox.io/s/y229669nvx

Answer 1

读完之后，好像是by design to not assert against events handlers。虽然看起来 to work in React 16.5，但是，使用 16.8.x 失败。如果您想测试这些功能，我建议您转向酶。

使用react-testing-library 测试失败（但是，您会注意到，在运行测试时，输入的值实际上会改变）：https://codesandbox.io/s/n3rvy891n4

使用enzyme 测试成功：https://codesandbox.io/s/lx34ny41nl

Answer 2

您的测试不起作用的原因是您使用getByTestId 来查找您的元素。 getByTestId 查找具有 data-testid 属性的 DOM 节点。

为了使您的测试通过，您有多种选择。

您可以将data-testid 添加到您的input：<input data-testid="input" onChange={onChange} />。这会起作用，但是，最好尽可能避免使用测试 ID。

在实际应用中，您的输入会以label 呈现，我们可以利用这一点：

const { getByLabelText } = render(
  <label>
    My input
    <Input onChange={onChange} />
  </label>
)
const input = getByLabelText('My input')

另一种解决方案是使用container，它是render 返回的值之一。它是一个 DOM 节点——就像 RTL 中的所有其他东西一样——所以你可以使用常用的 DOM API：

const { container } = render(<Input onChange={onChange} />)
// Any of these would work
const input = container.firstChild
const input = container.querySelector('input')

---

附带说明，我同意 RTL 测试与 Enzyme 相比似乎更复杂。这是有充分理由的。 RTL 推动您测试您的应用程序，就好像它是一个黑盒一样。一开始这有点难，但最终会带来更好的测试。

另一方面，Enzyme 在默认情况下会模拟大多数事物，并允许您与组件实现进行交互。根据我的经验，这在开始时看起来更容易，但会产生脆弱的测试。

如果您需要入门帮助，我鼓励您加入 spectrum channel。