enzymejs / enzymejs/enzyme

wrappingComponent can't work well with useContext hooks

Open
#2,174 6 comments 10 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.