#2549·enzyme

Method “type” is meant to be run on 1 node. n found instead

Author: totszwaiCreated Nov 30, 2021Updated Sep 8, 2022

Update

React 16 + enzyme-adapter-react-16 reduced use case sandbox here: https://github.com/enzymejs/enzyme/issues/2549#issuecomment-982954339

Current behavior

React 17, using all the latest packages.

I follow one of the enzyme unit test workaround to include Mui's ThemeProvider + styled-components's ThemeProvider

function UnitTestThemeWrapper (props: any) {
  // console.log(props.theme);
  return (
    <StyledEngineProvider injectFirst>
      <MuiThemeProvider theme={props.theme || LightTheme}>
        <ThemeProvider theme={props.theme || LightTheme}>
          <GlobalStyle />
          <CssBaseline />
          {props.children}
        </ThemeProvider>
      </MuiThemeProvider>
    </StyledEngineProvider>
  );
}

const shallowWithTheme = (node: ReactElement, options?: ShallowRendererProps): ShallowWrapper => {
  // The only way to get it to work, is to manually wraps the node ourselves.
  // return shallow(UnitTestThemeWrapper(node), options);

  // Note: For some reason the wrappingComponent from Enzyme is broken.
  // It would not properly calls the wrappingComponent when using shallow.
  // It throws a cryptic error message which has nothing to do with the issues:
  //    "Method “type” is meant to be run on 1 node. 3 found instead."
 
  options = options || {
    wrappingComponent: UnitTestThemeWrapper
  };
  return shallow(node, options); // <= this throw "Method type is meant to be run on 1 node. 3 found instead.
  // */
};

My UT only has the following:

describe('Blah', () => {
  let wrapper: ShallowWrapper | ReactWrapper;
  it('should render', () => {
    wrapper = shallow(<Menu open={false} anchorEl={dummy} />);
  });
});

How can I get it to work? When I try to dump the node, this is what it prints out:

  console.log
    { '$$typeof': Symbol(react.element),
      type: [Function: Menu],
      key: null,
      ref: null,
      props: { open: false, anchorEl: HTMLDivElement {} },
      _owner: null,
      _store: {} }

      at shallowWithTheme (src/themes/testUtils.tsx:30:11)

Expected behavior

Your environment

API

  • shallow

Version

    "@emotion/css": "^11.5.0",
    "@emotion/jest": "^11.6.0",
    "@emotion/react": "^11.6.0",
    "@emotion/styled": "^11.6.0",
    "@types/enzyme": "^3.10.10",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
    "@mui/material": "^5.2.2",
    "@mui/styles": "^5.2.2",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "enzyme-to-json": "^3.6.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.0",
    "jest-emotion": "^11.0.0",
    "jest-enzyme": "^7.1.2",
    "jest-junit": "^12.2.0",
    "jest-styled-components": "^7.0.8",

Adapter

  • enzyme-adapter-react-16
  • others ("@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",)