Skip to content

mount Suspense and throw promise - Enzyme Internal Error: unknown node with tag 2 #2205

@json2d

Description

@json2d

Current behavior

Getting error Enzyme Internal Error: unknown node with tag 2

from mounting Suspense component with child component that throws promise:

import React, { Suspense } from "react";

const Message = props => <div>Hello Enzyme!</div>
const Loading = props => <div>loading...</div>
const Thrower = props => {
  throw new Promise(resolve => {
    setTimeout(resolve, 1000);
  });
};
describe("integration with Suspense component", () => {
  test("should render Message component", () => {
    const wrapper = mount(
      <Suspense fallback={<Loading />}>
        <Message />
      </Suspense>
    );

    expect(wrapper.find(Message)).toExist(); // ✅ passes
  });

  test("should render Loading component", () => {
    const wrapper = mount(
      <Suspense fallback={<Loading />}>
        <Thrower />
      </Suspense>
    );

    expect(wrapper.find(Loading)).toExist(); // ❌ Enzyme Internal Error: unknown node with tag 2
  });
})

trace:

    Enzyme Internal Error: unknown node with tag 2

      20 | 
      21 |   test("should render Loading component", () => {
    > 22 |     const wrapper = mount(
         |                     ^
      23 |       <Suspense fallback={<Loading />}>
      24 |         <Thrower />
      25 |       </Suspense>

      at _toTree (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:254:13)
      at toTree (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:267:12)
      at childrenToTree (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:227:14)
          at Array.map (<anonymous>)
      at map (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:269:27)
      at childrenToTree (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:248:19)
      at toTree (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:267:12)
      at childrenToTree (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:169:19)
      at Object.toTree [as getNode] (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:448:11)
      at new getNode (node_modules/enzyme/src/ReactWrapper.js:117:44)
      at mount (node_modules/enzyme/src/mount.js:10:10)
      at Object.mount (__tests__/Suspense.spec.js:22:21)

Expected behavior

No error

Your environment

API

  • shallow
    mount
    render

Version

library version
enzyme 3.10.0
jest-enzyme 7.0.2
react 16.8.6
react-dom 16.8.6
react-test-renderer 16.8.6
adapter (below) 1.14.0

Adapter

  • enzyme-adapter-react-16
    enzyme-adapter-react-16.3
    enzyme-adapter-react-16.2
    enzyme-adapter-react-16.1
    enzyme-adapter-react-15
    enzyme-adapter-react-15.4
    enzyme-adapter-react-14
    enzyme-adapter-react-13
    enzyme-adapter-react-helper
    others ( )

Activity

json2d

json2d commented on Jul 30, 2019

@json2d
Author
ljharb

ljharb commented on Jul 30, 2019

@ljharb
Member

Looks related to #2125.

ljharb

ljharb commented on Jul 30, 2019

@ljharb
Member

Does this only occur when you throw a promise, as opposed to another kind of exception?

json2d

json2d commented on Jul 30, 2019

@json2d
Author

Yep, throw new Error() instead of a promise doesn't yield this kind of message

ljharb

ljharb commented on Jul 30, 2019

@ljharb
Member

So you're not using any React.lazy components - which have to be a promise for an object with a default property that's a React component - but I'm not sure you're supposed to be able to throw a promise directly inside Suspense.

Can you link me to the React docs that talk about this? https://reactjs.org/docs/code-splitting.html doesn't seem to.

json2d

json2d commented on Jul 30, 2019

@json2d
Author

Throwing a promise inside Suspense should be the way to implement an async component - afaik.

here's a pretty recent article that talks about it:
https://blog.logrocket.com/the-future-of-react-unfolding-with-suspense/

The part about React.lazy you're referencing from the React docs talks about the import returning a promise that resolves to a module with an export default that's a React component.

ljharb

ljharb commented on Jul 30, 2019

@ljharb
Member

hmm, in that case perhaps the "thrown promise" case isn't something we're handling properly.

CrOrc

CrOrc commented on Jul 31, 2019

@CrOrc

Throwing promise inside render is supported by React Suspense.
See pull request in React repo Accept promise as element type

OlgaKuksa

OlgaKuksa commented on Sep 2, 2019

@OlgaKuksa

Hi there, is there any update on the issue? Looking forward for it to be fixed!

jeffersoneagley

jeffersoneagley commented on Mar 19, 2020

@jeffersoneagley

Still broken?

nickpalmer

nickpalmer commented on Aug 26, 2020

@nickpalmer

react-lazy-ssr triggers this error because it throws a promise.

While there is a workaround, it would be nice if Enzyme supported it without the workaround.

rdy

rdy commented on Sep 13, 2020

@rdy

I also ran into this issue testing recoil with enzyme and using a value that returns a promise.

It would be nice to be able to use suspense with enzyme.

ljharb

ljharb commented on Sep 15, 2020

@ljharb
Member

I'm working on fixing this, but the "detect fiber tags" code we use is having trouble figuring out the 17 (it has to be done dynamically so it doesn't break over time).

artola

artola commented on Jun 4, 2021

@artola

@ljharb I found this problem using v1.15.6 of the adapter. I am using relay v11 with relay-test-utils. Do you have some hint?

ljharb

ljharb commented on Jun 4, 2021

@ljharb
Member

@artola i can reproduce the issue, but i can't figure out yet how to update our internals to handle it.

artola

artola commented on Jun 4, 2021

@artola

@artola i can reproduce the issue, but i can't figure out yet how to update our internals to handle it.

I will give it a try. Thanks.

artola

artola commented on Jun 4, 2021

@artola

@ljharb I did some changes and it seems to work for me (at least my test is working), but I have not your experience and broad vision. Does it makes some sense?

// detectFiberTags.js
...
  function LazyFn() {
    throw Promise.resolve();
  }
...
module.exports = function detectFiberTags() {
...
  return {
    FunctionalComponentLazy: supportsLazy ? getLazyFiber(LazyFn).tag : -1,
// reactSixteenAdapter.js
...
    case FiberTags.Lazy:
    case FiberTags.FunctionalComponentLazy:
      return childrenToTree(node.child);

There is also a ClassComponentLazy that should be supported.

ljharb

ljharb commented on Jun 4, 2021

@ljharb
Member

@artola if you can make a PR with passing tests, then that sounds awesome.

linked a pull request that will close this issue on Jun 6, 2021
totszwai

totszwai commented on Jan 19, 2022

@totszwai

Failing without any async nor Promise.

it('blah', () => {
  const wrapper = render(
      <I18nextProvider i18n={i18n}>
        <Suspense fallback="Loading...">
          <Test />
        </Suspense>
      </I18nextProvider>
  );

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

Enzyme Internal Error: unknown node with tag 2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @rdy@ljharb@json2d@nickpalmer@CrOrc

      Issue actions

        mount Suspense and throw promise - Enzyme Internal Error: unknown node with tag 2 · Issue #2205 · enzymejs/enzyme