TypeError：无法读取 null React Apollo 测试的属性“createEvent”

Question

我收到一个错误，最终导致反应组件的测试崩溃。我使用 Apollo hook 进行突变useMutation，使用 Enzyme 通过 id 查找组件。

repo code\node_modules\react-dom\cjs\react-dom.development.js:154
      var evt = document.createEvent('Event'); // Keeps track of whether the user-provided callback threw an error. We
                         ^

TypeError: Cannot read property 'createEvent' of null

成分

repo code\node_modules\react-dom\cjs\react-dom.development.js:154
      var evt = document.createEvent('Event'); // Keeps track of whether the user-provided callback threw an error. We
                         ^

TypeError: Cannot read property 'createEvent' of null

测试

import React, { useEffect } from "react";
import { useMutation } from "@apollo/react-hooks";

export const MyComponent = () => {
  const [updateUser, { data: updateUserData }] = useMutation(GQL_UPDATE_USER);

  // Update user mutation data hook
  useEffect(() => {
    if (updateUserData?.success) {
      console.log("SUCCESS");
    }
  }, [updateUserData]);

  return (
    <button
      onClick={() => {
        updateUser({
          variables: {
            id: 1,
            name: "New name",
          },
        });
      }}
    >
      Submit
    </button>
  );
};

Answer 1

经过一番挖掘后，问题是我没有用任何断言完成测试。

因此，即使只是expect对任何项目进行简单设置或只是空白，await new Promise()也可以防止测试崩溃。

这是因为测试在完成后会中断组件执行，并且会干扰我发送的正在进行的突变。因此，我只需要在测试结束时添加一些断言（这就是我们进行测试的原因）：

测试：

import React from "react";
import { act, cleanup } from "@testing-library/react";
import { mount } from "enzyme";

afterEach(cleanup);

it("Should submit user update", async () => {
  await act(async () => {
    const componentWrapper = mount(<MyComponent />);

    const button = componentWrapper.find("#button");

    button.simulate("click");

    expect(button.length).toBe(1);
  });
});