不变违规:无法在未安装的组件上找到节点.阿波罗

Question

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

我尝试使用这篇中篇文章中发布的方法,但我根本无法使用它.

// 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

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

根据此Git Issue，问题出在 enzyme-adapter-react-16 中。EthanJStark表示，更新到酶版本 1.5.0 纠正了这个问题。我可以确认错误已停止。

太棒了；
package.json
– "enzyme-adapter-react-16": "^1.1",
+"enzyme-adapter-react-16": "^1.5.0",