web-dev-qa-db-ja.com

不変の違反：マウントされていないコンポーネントでノードが見つかりません。アポロ

Create Reactクエリコンポーネントを返すアプリ内のコンポーネントのテストで問題が発生しました。テストに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');
});
testingjestjsenzymeapolloapollo-client
10
Cristian Florea

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_ファイルを再作成するとともに、問題が修正されました。

1
Leo

自分でこれを解決するためにグーグルした後、私はこれを見つけました。

this Git Issueによると、問題は酵素アダプター反応16にあります。 EthanJStark 酵素バージョン1.5.0にアップデートすると修正されたとのことです。エラーが停止したことを確認できます。

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

1
kalm42