wrappingComponent can't work well with useContext hooks

// utils.ts
export enum Action {
  view = 'view',
  edit = 'edit',
  cancel = 'cancel',
  save = 'save',
}

export type ModeType = Action.view | Action.edit;

export const ModeContext = createContext(Action.view as ModeType);

// EditableItem.tsx
interface EditableItemProps extends ColProps {
  label: string;
  viewContent: any;
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
  disabled?: boolean;
}

export function EditableItem(props: EditableItemProps) {
  const {
    label,
    viewContent = '暂无数据',
    className,
    style,
    children,
    disabled,
    span,
    ...restProps
  } = props;
  const mode = useContext(ModeContext);
  console.log('mode inner', mode);
  const defaultSpan = span ? { span } : { xs: 24, md: 12, lg: 8, xl: 6 };
  return (
    <Col {...defaultSpan} className={className} style={style} {...restProps}>
      <FormItem label={label}>
        {mode === Action.edit && !disabled ? children : viewContent}
      </FormItem>
    </Col>
  );
}

// EditableItem.test.tsx
function ModeContextProvider(props: any) {
  const { children, mode } = props;
  console.log('mode provider', mode);
  return <ModeContext.Provider value={mode}>{children}</ModeContext.Provider>;
}

it('should render string', () => {
  const viewContent = 'test content';
  const wrapper = shallow(
    <EditableItem label="test" viewContent={viewContent}>
      test children
    </EditableItem>,
    {
      wrappingComponent: ModeContextProvider,
      wrappingComponentProps: {
        mode: Action.view,
      },
    }
  );
  expect(wrapper.getElement()).toMatchSnapshot();
  const provider = wrapper.getWrappingComponent();
  provider.setProps({
    mode: Action.edit,
  });
  wrapper.update();
  expect(wrapper.getElement()).toMatchSnapshot();
});

Current behavior

// console
mode provider view
mode inner view
mode provider edit
mode inner view

Expected behavior

// console
mode provider view
mode inner view
mode provider edit
mode inner edit // not view

Your environment

node v10.14.2 npm v6.9.0

API

• shallow
• mount
• render

Version

library	version
enzyme	^3.10.0
react	^16.8.6
react-dom	^16.8.6
react-test-renderer	^16.8.6
adapter (below)

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 ( )

[Tan90Qian]

why ReactSixteenAdapter.createRenderer() don’t call createRenderWrapper() in ReactSixteenAdapter.createShallowRenderer() just like ReactSixteenAdapter.createStringRenderer() ?

// enzyme-adapter-react-16/src/ReactSixteenAdapter.js
class ReactSixteenAdapter extends EnzymeAdapter {
  ...
  createStringRenderer(options) {
    if (has(options, 'suspenseFallback')) {
      throw new TypeError('`suspenseFallback` should not be specified in options of string renderer');
    }
    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(ContextWrapper));
        }
        return ReactDOMServer.renderToStaticMarkup(el);
      },
    };
  }

  // Provided a bag of options, return an `EnzymeRenderer`. Some options can be implementation
  // specific, like `attach` etc. for React, but not part of this interface explicitly.
  // eslint-disable-next-line class-methods-use-this
  createRenderer(options) {
    switch (options.mode) {
      case EnzymeAdapter.MODES.MOUNT: return this.createMountRenderer(options);
      case EnzymeAdapter.MODES.SHALLOW: return this.createShallowRenderer(options);
      case EnzymeAdapter.MODES.STRING: return this.createStringRenderer(options);
      default:
        throw new Error(`Enzyme Internal Error: Unrecognized mode: ${options.mode}`);
    }
  }
}

[Tan90Qian]

@ljharb https://codesandbox.io/s/enzyme-shallow-2-8x9hb