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

Posted 2023-03-10

【中文标题】不变违规：无法在未安装的组件上找到节点。阿波罗

【英文标题】：Invariant Violation: Unable to find node on an unmounted component. Apollo

【发布时间】：2019-01-03 09:09:26

【问题描述】：

我在一个返回查询组件的 Create React 应用程序中测试一个组件时遇到了一些问题，我正在使用 jest 和酶进行测试。我得到的错误是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());
    );
  );

);

这是我试图重现的代码 sn-p：

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');
);

【参考方案1】：

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

根据this Git 问题，问题出在酶适配器反应 16 中。 EthanJStark 说更新到酶版本 1.5.0 更正了它。我可以确认错误已停止。

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

【参考方案2】：

我也收到了 Invariant Violation: Unable to find node on an unmounted component 与 TypeScript 和 Next.js 的组合。

在创建一个可行的独立项目后，我知道它必须是我的代码库。

堆栈跟踪似乎停止了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 文件。