configure custom wrappingComponent and use shallow method cause RangeError: Maximum call stack size exceeded

Jest setup file:

import React from 'react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

function CustomWrapper({ children }) {
  return <div>{children}</div>;
}

configure({
  adapter: new Adapter(),
  wrappingComponent: CustomWrapper,
});

Test case:

import React from 'react';
import { shallow } from 'enzyme';

function Button() {
  return <button>My Button</button>;
}

it('should work', function () {
  const el = shallow(<Button />); // throw RangeError: Maximum call stack size exceeded
  expect(el).toMatchSnapshot();
});

I found it seems to be this line: ShallowWrapper.js#L355

• enzyme: 3.10.0
• enzyme-adapter-react-16: 1.15.1
• jest: 24.9.0
• react: 16.12.0

[xuyuanxiang]

I found a way to avoid this issue:

import React from 'react';
import { configure } from 'enzyme';
import { createRenderWrapper } from 'enzyme-adapter-utils';
import Adapter from 'enzyme-adapter-react-16';

function CustomWrapper({ children }) {
  return <div>{children}</div>;
}

class CustomAdapter extends Adapter {
  createStringRenderer(options) {
    return {
      render(el, context) {
        if (options.context && (el.type.contextTypes || options.childContextTypes)) {
          const childContextTypes = {
            ...(el.type.contextTypes || {}),
            ...options.childContextTypes,
          };
          const ContextWrapper = createRenderWrapper(el, context, childContextTypes);
          return ReactDOMServer.renderToStaticMarkup(
            React.createElement(CustomWrapper, null, React.createElement(ContextWrapper)),
          );
        }
        return ReactDOMServer.renderToStaticMarkup(React.createElement(CustomWrapper, null, el));
      },
    };
  }
  createMountRenderer(options) {
    Object.assign(options, { wrappingComponent: CustomWrapper });
    return super.createMountRenderer(options);
  }
}

configure({
  adapter: new CustomAdapter(),
});

[xuyuanxiang]

I mean:

shallow(<Button />, { wrappingComponent: CustomWrapper })

The makeShallowOptions function will merge configure options and shallow passedOptions.

Either way:

import { configure, shallow } from 'enzyme';

configure({ wrappingComponent: CustomWrapper });

shallow(<Button />, { wrappingComponent: CustomWrapper }); // Throw Range Error...

This error is raised whenever wrappingComponent exists.

Sorry, I actually execute the code only configure wrappingComponent at the adapter level will raise this error, pass it in shallow was ok.

Test case:

import React from 'react';
import { shallow, configure } from 'enzyme';

function CustomWrapper({ children }) {
  return <div>{children}</div>;
}

function Button() {
  return <button>My Button</button>;
}

it('should work ok', () => {
  shallow(<Button />, { wrappingComponent: CustomerWrapper });
});

it('should raise RangeError', () => {
  configure({ wrappingComponent: CustomerWrapper });
  expect(() => shallow(<Button />)).toThrow('Maximum call stack size exceeded');
});