From 658422b6d6f4d647a4186b13cf210ab93763c4ae Mon Sep 17 00:00:00 2001 From: Kevin Read Date: Sun, 14 Mar 2021 14:55:31 +0100 Subject: [PATCH] [enzyme-adapter-react-16] [new] add `contextType` support Add support for passing context to React class based components that request context via setting .contextType, according to patches posted in https://github.com/enzymejs/enzyme/issues/2189#issuecomment-796416083. Adds changes to ReactSixteenAdapter and simple test case. Co-authored-by: Kevin Read Co-authored-by: Pablo Palacios --- .../src/ReactSixteenAdapter.js | 8 +- .../test/ShallowWrapper-spec.jsx | 80 ++++++++++++++++++- 2 files changed, 85 insertions(+), 3 deletions(-) diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js index b07a1f31b..937e1f794 100644 --- a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js +++ b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js @@ -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; diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx index efd22c9a4..654bf06a4 100644 --- a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx @@ -539,7 +539,7 @@ describe('shallow', () => { let Consumer; beforeEach(() => { - ({ Provider, Consumer } = React.createContext('howdy!')); + ({ Provider, Consumer } = createContext('howdy!')); }); class Consumes extends React.Component { @@ -611,7 +611,7 @@ describe('shallow', () => { let Consumer; beforeEach(() => { - ({ Provider, Consumer } = React.createContext('howdy!')); + ({ Provider, Consumer } = createContext('howdy!')); }); class Consumes extends React.Component { @@ -666,6 +666,82 @@ describe('shallow', () => { expect(consumer.text()).to.equal('foo'); }); }); + + describeIf(is('>= 16.6'), 'shallow() on Provider and Consumer through .contextType', () => { + let Provider; + + beforeEach(() => { + ({ Provider } = createContext('howdy!')); + }); + + class OuterComponent extends React.Component { + render() { + const { value } = this.props; + return ( + + ); + } + } + + class WrappingComponent extends React.Component { + render() { + const { children, value } = this.props; + return ( + { children } + ); + } + } + + 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(); + 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(); + 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(, { + wrappingComponent: WrappingComponent, + wrappingComponentProps: { value: 'foo' }, + }); + + expect(wrapper.text()).to.equal('foo'); + }); + + it('renders updated context value', () => { + const wrapper = shallow(, { + 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)', () => {