Question

我在测试返回返回查询组件的Create React App内的组件时遇到一些问题，我正在使用玩笑和酶进行测试。我得到的错误是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问题，问题出在酶适配器16反应中。 EthanJStark表示，更新到酶1.5.0版可以更正它。我可以确认错误已停止。

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

Answer 2

在混合使用TypeScript和Next.js时，我也得到了Invariant Violation: Unable to find node on an unmounted component。

在创建一个有效的隔离项目之后，我知道它必须是我的代码库。

堆栈跟踪似乎源于at invariant (node_modules/react-dom/cjs/react-dom.development.js:55:15)。

因此，就我而言，从"react-dom": "16.5.2"升级到"react-dom": "16.7.0"为我解决了该问题，并重新创建了yarn.lock文件。

永久违反：无法在未安装的组件上找到节点。阿波罗

2 个答案: