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

Question

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

我想测试 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 Prop )，而您实际拥有的是一个独立的可重用 TextBox 没有父组件的子组件，需要进行单元测试。

所以你有两个选择:

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

选项 2:浅化/挂载子组件并操纵其事件处理程序以触发 Jest 模拟父 Prop (例如操纵输入的 onChange Prop 并期望它调用模拟的父 handleChange 带有 value 的属性)。它实际上并没有更新 child ，而是模拟了它。这对于测试可以具有许多不同父组件的SHARED 可重用子组件特别有用。

选择哪个选项因开发人员和项目而异。但在理想世界中，您的测试套件将遵循类似于“测试金字塔”的东西:

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

---

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

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

---

这是一个如何测试此组件的示例:

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