Skip to content

Commit

Permalink
[enzyme-adapter-react-16] [new] add contextType support
Browse files Browse the repository at this point in the history
Add support for passing context to React class based components that request context via setting .contextType, according to patches posted in #2189 (comment). Adds changes to ReactSixteenAdapter and simple test case.

Co-authored-by: Kevin Read <[email protected]>
Co-authored-by: Pablo Palacios <[email protected]>
  • Loading branch information
2 people authored and ljharb committed Mar 14, 2021
1 parent 3a7701c commit 16cf05f
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 1 deletion.
8 changes: 7 additions & 1 deletion packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
Original file line number Diff line number Diff line change
Expand Up @@ -690,7 +690,13 @@ class ReactSixteenAdapter extends EnzymeAdapter {
renderedEl = transformSuspense(renderedEl, renderedEl, { suspenseFallback });
const { type: Component } = renderedEl;

const context = getMaskedContext(Component.contextTypes, unmaskedContext);
let context;
if (Component.contextType) {
const Provider = adapter.getProviderFromConsumer(Component.contextType);
context = providerValues.has(Provider) ? providerValues.get(Provider) : getProviderDefaultValue(Provider);
} else {
context = getMaskedContext(Component.contextTypes, unmaskedContext);
}

if (isMemo(el.type)) {
const { type: InnerComp, compare } = el.type;
Expand Down
72 changes: 72 additions & 0 deletions packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -666,6 +666,78 @@ describe('shallow', () => {
expect(consumer.text()).to.equal('foo');
});
});

describeIf(is('>= 16.6'), 'shallow() on Provider and Consumer through .contextType', () => {
const { Provider } = createContext('howdy!');

class OuterComponent extends React.Component {
render() {
const { value } = this.props;
return (
<Provider value={value}><InnerComponent /></Provider>
);
}
}

class WrappingComponent extends React.Component {
render() {
const { children, value } = this.props;
return (
<Provider value={value}>{ children }</Provider>
);
}
}

class InnerComponent extends React.Component {
render() {
return this.context;
}
}

InnerComponent.contextType = Provider;

describe('rendering the Provider directly', () => {
it('renders initial context value', () => {
const wrapper = shallow(<OuterComponent value="foo" />);
const provides = wrapper.find(Provider).shallow();
const provider = provides.find(InnerComponent).dive();

expect(provider.text()).to.equal('foo');
});

it('renders updated context value', () => {
const wrapper = shallow(<OuterComponent value="foo" />);
wrapper.setProps({ value: 'bar' });
const provides = wrapper.find(Provider).shallow();
const provider = provides.find(InnerComponent).dive();

expect(provider.text()).to.equal('bar');
});
});

describe('rendering the Provider through wrappingComponent', () => {
it('renders initial context value', () => {
const wrapper = shallow(<InnerComponent />, {
wrappingComponent: WrappingComponent,
wrappingComponentProps: { value: 'foo' },
});

expect(wrapper.text()).to.equal('foo');
});

it('renders updated context value', () => {
const wrapper = shallow(<InnerComponent />, {
wrappingComponent: WrappingComponent,
wrappingComponentProps: { value: 'foo' },
});
const wrappingComponent = wrapper.getWrappingComponent();
wrappingComponent.setProps({ value: 'bar' });
wrappingComponent.rerender();

expect(wrapper.text()).to.equal('bar');
});
});
});
});

describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
Expand Down

0 comments on commit 16cf05f

Please sign in to comment.