在 Jest 中测试无状态子组件中的父方法

Question

我目前有一个带有onChange 方法的反应组件。

我想测试 onChange 方法，就像有人要输入或粘贴内容一样。问题是 handleChange 依赖于使用它的父组件。测试模拟的最佳方法是什么？我需要引用父组件的handleChange 方法并进行模拟吗？

CodeSandbox（我没有在这里添加测试）

https://codesandbox.io/s/react-basic-example-cwdh1?from-embed

更新当前测试：

const handleChange = jest.fn();

const initProps = {
  name: "Title",
  label: "Body",
  type: "text",
  value: "",
  handleChange
};

describe("TextBox", () => {
    let wrapper;
    beforeEach(() => {
      wrapper = mount(<TextBox {...props} />);
    });

    afterEach(() => {
      // resets the mocked fn after each test
      handleChange.mockClear();
    });

    it("should call handleChange with a new value", () => {
      const value = "testing input";
      wrapper.find("input").simulate("change", { target: { value } });

      expect(handleChange).toHaveBeenCalledWith(value);
    });
  });

错误：

Expected: "testing input"
Received: {"_dispatchInstances": null, "_dispatchListeners": null,
 "_targetInst": ......more fields... "nativeEvent": {"target": <input … />,
 "type": "change"}, "target": {"value": "testing input"}, "timeStamp":
 1576040322012, "type": "change"}

我知道我收到此错误是因为该值来自表单域。有没有办法可以提取目标字段？

Answer 1

我认为您对自己的测试方法有些困惑。您要做的是使用父组件和子组件进行组件/集成测试（操作父类字段以更新子组件的 value 道具），而实际上您拥有的是一个独立的可重用 TextBox 子组件，没有需要进行单元测试的父级。

所以你有两个选择：

选项 1：挂载父组件并操作其类字段以更新此子组件（和/或操作子组件的事件处理程序道具，然后更新父组件的状态......等等）。这将测试该 ONE 特定组件的父级与其子级之间的同步性。这对于测试管理 state 并将其分配给一些子 (form elements) 组件的组件（如 form）特别有用。

选项 2：浅层/安装子组件并操纵其事件处理程序以触发开玩笑的模拟父道具（例如操纵输入的 onChange 道具并期望它使用 value 调用模拟的父 handleChange 道具） .它实际上并没有更新孩子，而是模拟它。这对于测试 SHARED 可具有许多不同父组件的可重用子组件特别有用。

选择哪个选项因开发人员和项目而异。但在理想情况下，您的测试套件将遵循类似于“测试金字塔”的内容：

在您的情况下，我建议如果此子组件与您的应用程序中的许多父组件共享，则同时进行父集成测试和子单元测试（这会导致一些重叠测试，但确保跨应用程序的兼容性应用程序，如果父母或孩子要更改或更新）。如果此组件仅在单个父组件中重用，则只需执行单个父集成测试。也就是说，这只是我的建议——不是规则！

---

另外说明，您的 TextBox 组件不使用状态，因此您可以简单地使用无状态函数，而不是使用类：

const TextBox = ({ value, type, handleChange }) => (
  <Form.Control
    type={type}
    value={value}
    onChange={handleChange}
  />
);

---

下面是如何测试此组件的示例：

一些注意事项： 您的TextBox 本质上是一个第三方组件，大概已经由react-bootstrap 维护人员进行了测试。所以从实际的角度来看，为这个子组件创建一个测试是多余的。相反，我建议测试父组件并期望父组件的状态在此子 TextBox 的 input 已更改时更新。尽管如此，codesandbox 包括对TextBox 和Form 组件的测试。 关于为什么你的handleChange 模拟函数被多个道具调用......它被Synthetic Event 调用，这是正常的（我的大脑放屁没有考虑到这一点）。也就是说，您可以通过遍历mockedFn.mock.calls 数组或通过对mockedFn 本身进行断言（两者都包含在TextBox 测试中）来使用expect.objectContaining 来断言合成事件。