wrappingComponent can't work well with useContext hooks
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
```typescript
// 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 (
{mode === Action.edit && !disabled ? children : viewContent}
);
}
// EditableItem.test.tsx
function ModeContextProvider(props: any) {
const { children, mode } = props;
console.log('mode provider', mode);
return {children};
}
it('should render string', () => {
const viewContent = 'test content';
const wrapper = shallow(
test children
,
{
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
- [x] 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
- [x] 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 ( )
Contributor guide
Assessment
This issue has not been assessed yet.