testing - 不变违规 : Unable to find node on an unmounted component. Apollo

Question

我在测试返回查询组件的 Create React App 中的组件时遇到了一些问题，我正在使用 jest 和 enzyme 进行测试。我收到的错误是 Invariant Violation: Unable to find node on an unmounted component.。对我做错了什么有什么想法吗？我想要得到的是测试查询组件是否会根据从服务器接收到的数据返回一个组件数组。

我尝试使用 this medium article 中发布的方法，但我根本无法让它工作。

// The component

export class MyWrapper extends React.Component {
  render() {
    return (
        <List divided verticalAlign="middle" >
          <Query query={query} >
            {({ data, loading, error, refetch }) => {
              if (loading) return <Loader />;
              if (error) return <ErrorMessage />;

              // set refetch as a class property
              this.refetch = refetch;

              return data.response
                .map(el => (
                  <MyComponent
                    el={el}
                  />
                ));
            }}
          </Query>
        </List>

    );
  }
}

export default compose(
 ...//
)(MyWrapper);

// The test file

import React from "react";
import { MockedProvider } from "react-apollo/test-utils";
import query from "path/to/query";
import { MyWrapper } from "../MyWrapper";
import { props } from "./props";

const mocks = {
  request: {
    query,
  },
  result: {
    data: {
      response: [
        // data
      ]
    }
  }
};

describe("<MyWrapper />", () => {
  describe("rendering", () => {
    it("renders <MyComponent />'s", async () => {
      const wrapper = mount(
        <MockedProvider mocks={mocks} removeTypename>
          <MyWrapper {...props} />
        </MockedProvider>
      );

      await new Promise(resolve => setTimeout(() => resolve(), 1000));
      wrapper.update();

      console.log(wrapper.debug());
    });
  });

});

这是我尝试重现的代码片段:

const wait = require('waait');

it('should render dog', async () => {
  const dogMock = {
    request: {
      query: GET_DOG_QUERY,
      variables: { name: 'Buck' },
    },
    result: {
      data: { dog: { id: 1, name: 'Buck', breed: 'poodle' } },
    },
  };

  const component = renderer.create(
    <MockedProvider mocks={[dogMock]} addTypename={false}>
      <Dog name="Buck" />
    </MockedProvider>,
  );

  await wait(0); // wait for response

  const p = component.root.findByType('p');
  expect(p.children).toContain('Buck is a poodle');
});

Answer 1

在谷歌搜索自己解决这个问题后，我发现了这个。

根据 this Git Issue 问题出在 enzyme-adapter-react-16 中。 EthanJStark说更新到 enzyme 版本 1.5.0 更正了它。我可以确认错误已停止。

tldr;
package.json
– "enzyme-adapter-react-16": "^1.1",
+ "enzyme-adapter-react-16": "^1.5.0",