ShallowRenderer does not work with Class.contextType

[mpmaia]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

The shallow renderer from the 'react-test-renderer' package does not work with Class.contextType. The component always receives an empty object as the context.

What is the expected behavior?

The shallow renderer should forward the context provided to the render method to the rendered component's this.context.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

16.6.3

Steps to reproduce

The test below can be used to reproduce the problem (Open on codesandbox.io). The first test reproduces the bug and the second test shows a workaround.

import * as React from "react";
import ShallowRenderer from 'react-test-renderer/shallow'
import PropTypes from 'prop-types';

const TestContext = React.createContext({message:"TEST1"});
class TestShallow extends React.Component {

    static contextType = TestContext;

    componentDidMount() {
        console.log(this.context.message);
    }

    render() {
        return <h1>{this.context.message}</h1>;
    }
}

it('shallow render with contextType', () => {

    const result = new ShallowRenderer().render(<TestShallow />, {message:"TEST2"});
    expect(result).toEqual(<h1>TEST2</h1>); //FAILS

});

it('workaround shallow render with contextType', () => {

    TestShallow.contextTypes = {
        message: PropTypes.string
    };

    const result = new ShallowRenderer().render(<TestShallow />, {message:"TEST2"});
    expect(result).toEqual(<h1>TEST2</h1>); //WORKS

});

The problem seems to be located here. The function getMaskedContext() checks the properties declared on type.contextTypes and filters out the properties from the context provided to the shallow render unless the types.contextTypes is declared.

[charBap]

Can I take this?

[gaearon]

Sure.

[Timbo2000aa]

Yes Den søn. 3. feb. 2019, 18:57 skrev Alex Berman <notifications@github.com:

…

Is this issue still being worked on @charBap <https://github.com/charBap>? If not id be glad to take it on! @gaearon <https://github.com/gaearon> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#14442 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/As-519wKdzNgTDFhGpxUMPXeVllO_IwQks5vJyMegaJpZM4ZT9xF> .

[Aberman12]

Is this issue still being worked on @charBap? If not id be glad to take it on! @gaearon

[gaearon]

@Aberman12 please do!

[Aberman12]

awesome, thanks!

[AbhishekThorat]

Is this being worked on @Aberman12? If not I would love to look into it :)
Meanwhile, it seems that solution for this will revert changes which @koba04 has added as part of #11862 (As per my understanding, these changes are not needed with a combination of the new context API)
@gaearon and team please correct if my understanding is wrong. (I am quite new to open source)

[manuelbertelli]

Hi, I want to start collaborating with open source often and, as I had worked with React for some time, I thought it would be nice to start collaborating here. I've been looking into this issue and I suppose it's a user mistake and not a bug.

First, there is a typo in static contextType = TestContext, as it should be declared contextTypes in plural.

Second, I dig into the ReactContext to understand it more, and I suppose that it isn't used for creating element contexts, but has some use in server-side rendering and concurrency with threads.

So, trying to use React.createContext() to create element contexts never gonna work.

Saying this, IMO, this is not a bug and can be closed.

[bedakb]

It's not a typo, It's more like leftover from Legacy Context API where It was in plural.

If I am not mistaken, changing contextTypes to contextType in this file https://github.com/facebook/react/blob/master/packages/react-test-renderer/src/ReactShallowRenderer.js should fix problem ?

@gaearon I'd like then take this one, If It's possible.

[xmd5a]

I'm challenging this issue too.

I'm trying to get snapshots tests - changing static contextType into static contextTypes resolves my snap well, but on the other side (app) I'm getting errors. Probably changing this property name you listed in package above will fix problem.

[bedakb]

I'm a bit confused with this one now.I went through the React source code and seen a lot of usages of contextTypes, so I'm not really sure is renaming thing way to go.
I'd like to have feedback from someone who is more familiar about this topic than me :)

[najeeb-rifaat]

Seems like react-test-renderer still expects the old class component propretry contextTypes (plural with s)

this._context = getMaskedContext(element.type.contextTypes, context); here.

while newer (unsable) code is using class component propretry 'contextType' and some existing code suggests that both should be used while newer convention should take precedence over the older one. here

@gaearon should the fix be considering both old and new component propreties OR omit the old plural contextTypes with a warning ?

[bitforth]

Is this issue taken? I'd love to work on it.

[16bitash]

Hi, just wanted to check if someone is working on this issue. If not, it'll be my pleasure to work on it!

[gaearon]

The shallow renderer has moved to https://github.com/NMinhNguyen/react-shallow-renderer. If this is still relevant, please feel free to file this issue there. Thanks!