Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ShallowRenderer does not work with Class.contextType #14442

Open
mpmaia opened this Issue Dec 14, 2018 · 7 comments

Comments

Projects
None yet
6 participants
@mpmaia
Copy link

commented Dec 14, 2018

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

This comment has been minimized.

Copy link

commented Jan 19, 2019

Can I take this?

@gaearon

This comment has been minimized.

Copy link
Member

commented Jan 19, 2019

Sure.

@Timbo2000aa

This comment has been minimized.

Copy link

commented Feb 3, 2019

@Aberman12

This comment has been minimized.

Copy link

commented Feb 4, 2019

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

@gaearon

This comment has been minimized.

Copy link
Member

commented Feb 4, 2019

@Aberman12 please do!

@Aberman12

This comment has been minimized.

Copy link

commented Feb 4, 2019

awesome, thanks!

@AbhishekThorat

This comment has been minimized.

Copy link

commented Feb 24, 2019

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.