Enzyme Internal Error: unknown node with tag 14

[karolisgrinkevicius]

Getting Enzyme Internal Error: unknown node with tag 14 where mount is used on cloned element node. For instance:

...
 mount(React.cloneElement(node))
...

Update
After grid-styled reverted to 4.1.1 seems to be working fine.

Versions

• grid-styled 5.0.2 ☢️
• styled-system 3.0.1
• react 16.4.1
• jest 23.4.1
• enzyme 3.3.0
• enzyme-adapter-react-16 1.1.1
• enzyme-react-intl 2.0.0
• enzyme-to-json 3.3.4

[ljharb]

Hmm, that's a new one, thanks. I'm not sure if that's an issue confined to React 16 or not - it's possible that nobody's ever tried to directly mount or shallow-render a cloned element before :-)

[karolisgrinkevicius]

At least I’ve tried and it was actually working fine before. 👌🏻

[AdamZaczek]

I also have this issue when using grid-styled 5.0.2

[ljharb]

@karolisgrinkevicius can you be more specific on "before"? do you mean in enzyme 2, or in react 15 with enzyme 3, or in an earlier version of the react 16 adapter?

[karolisgrinkevicius]

@ljharb as the icon after grid-styled reveals in my post it's basically what I'm talking about.

[ljharb]

ah - right :-) that implies that grid-styled updated to use fragments; as opposed to implying that enzyme has a regression around mounting fragments.

[karolisgrinkevicius]

@ljharb could you please be more specific? I'm actually looking for the concrete solution to solve this.

[ljharb]

@karolisgrinkevicius sure! basically, it's clear that "latest enzyme" can't mount cloned elements. It's clear that you don't run into this problem with grid-styled v4, only with v5 - but that doesn't relate to enzyme, since v4 probably isn't using cloned elements at all. What would relate to enzyme, is if grid-styled v5 works with any version of enzyme - which I suspect it does not.

[karolisgrinkevicius]

I actually created an issiue in grid_styled as well to make sure this could be solved a bit quicker. If it’s nothing that enzyme can do with you can probably close this issue. Thank you for the clarification @ljharb ! 👍🏻

[ljharb]

We should be able to mount cloned elements.

[ljharb]

I just realized this probably has nothing to do with cloning; can you try to mount node itself? Can you share more of the test code from the OP?

[karolisgrinkevicius]

@ljharb please see the code below to reproduce this issue using grid-styled@5. The code below simply does mounting with providers to avoid a lot of mocking data in components specs.

import * as React from 'react';
import { createProvider, Provider as ReduxProvider } from 'react-redux';
import { ThemeProvider } from 'styled-components';
import * as R from 'ramda';
import { shallow, mount } from 'enzyme';
import configureStore from 'redux-mock-store';

import { theme } from 'theme'; // locally defined theme
import rootReducer from 'store/reducers'; // local root reducer

type Node = React.ReactElement<any>;

const themeInstance = shallow(<ThemeProvider theme={theme} />).instance() as any;
const StoreProvider = createProvider('store');
const createStore = configureStore();

const getStoreProvider = (initialState = {}) => {
  const mockStore = createStore(R.mergeDeepRight(rootReducer({} as any, {} as any), initialState));
  return new StoreProvider({ store: mockStore });
};
const getProvidersContexts = (storeProvider: any) => ({ store: storeProvider.getChildContext().store });

export const mountWithProviders = (initialState = {}) => {
  const storeProvider = getStoreProvider(initialState);
  return (node: Node) => {
    return mount(React.cloneElement(node, getProvidersContexts(storeProvider)), {
      context: { ...getProvidersContexts(storeProvider), ...themeInstance.getChildContext() },
      childContextTypes: {
        ...ReduxProvider.childContextTypes,
        ...ThemeProvider.childContextTypes,
      },
    });
  };
};

Then you can basically do this:

const wrapper = mountWithProviders()(<MyComponent />);

[ljharb]

(import * as React is categorically incorrect; if you're using TypeScript and it's forcing you to do that, it's broken and violates the spec, and you need the synthetic imports option)

Thanks, that clarifies things - that means it's definitely not cloning, it's potentially something grid-styled is doing.

[karolisgrinkevicius]

Could you please clarify what this means?

it's broken and violates the spec

[ljharb]

Yes; Typescript has broken behavior for many versions where import * as was needed to bring in CJS modules, but the spec requires that import * as bring in a frozen Module namespace object. import React as 'react' is the only thing that is correct, ever.

[karolisgrinkevicius]

I also took a try without cloning a node itself and passing it directly to mount but result is the same.

[ljharb]

Thanks, that clears up that it's not related to cloning.

Tag 14 is a ForwardRef - this will be resolved by #1592, and is a duplicate of #1604