Skip to main content

JavaScript: Some Tips for Using MobX's Provider with Enzyme, etc.

Recently, we decided to move from using React's context functionality directly, to using MobX's Provider feature. Updating the code was a little painful, but not nearly as hard as trying to move from React Router v2 to v4! There were a few things that were hard in particular, such as updating all of the Enzyme-based tests. If you need to do the same thing, here are some tips:

First of all, start by reading all the documentation on Provider and inject. I'm not going to duplicate that here.

Let's suppose you have a component named MyComponent, and you have a MobX store named myStore.

If you're using a function-based component like:

const MyComponent = inject('myStore')(observer(cssModules(
    ({ myStore }) => <div>hi!</div>,
    styles,
)));
 
export default MyComponent;

Then to set the propTypes, you'll need to write:

MyComponent.wrappedComponent.propsTypes = { myStore: PropTypes.object.isRequired };

Thankfully, you'll get a warning if you get this one wrong.

In this case, the class-based syntax with decorators looks a bit nicer:

@inject('myStore')
@observer
@cssModules(styles)
export default class MyComponent extends Component {
    static propTypes = {
        myStore: PropTypes.object.isRequired,
    };
 
    render() {
        return <div>hi!</div>;
    }
}

If you're using shallow to test MyComponent, then you should use .wrappedComponent, and pass myStore as a prop directly (which is one of my favorite features of how Provider works):

wrapper = shallow(<MyComponent.wrappedComponent myStore={ myStore } />);

If you're using mount, don't use wrappedComponent. Instead use Provider:

wrapper = mount(
    <Provider myStore={ myStore }>
        <MyComponent />
    </Provider>,
);

If you're using mount, and you see some code like:

wrapper.find(MyComponent).node...;

You'll probably need to change it to:

wrapper.find(MyComponent.wrappedComponent).node...;

If you are in a weird situation where you have to use context and Provider, you're going to find out that Enzyme won't pass any context to Provider since Provider isn't expecting it. Hence, nested components won't get the context that they need. To work around that problem (which is really a problem with how Enzyme works), you can do something like:

    wrapper = mount(
        <Provider myStore={ myStore }>
            <MyComponent>
                <MyOtherComponentThatNeedsContext />
            </MyComponent>
        </Provider>,
        {
            context: { mySpecialContextData },
            childContextTypes: {
                mySpecialContextData: PropTypes.object.isRequired
            }
        },
    );

Anyway, that's all I have for now. I'll keep updating this blog post with more tips as I find them.


Comments

jjinux said…
Let's suppose you have a component that makes use of Provider:

export default class PracticeTestStartPage extends Component {
    render() {
        return (
            <Provider courseTakingStore={ this.props.courseTakingStore }>
                <div className="fullscreen db-sm fx-lc full-top-nav__scroll-wrapper">
                    ...
                </div>
            </Provider>
        );
    }
}

And you have a test like:

it('renders page', () => {
    wrapper = shallow(<PracticeTestStartPage courseTakingStore={ courseTakingStore }
                                             startQuiz={ startQuiz } quiz={ quiz } />);
    expect(wrapper.text().includes('Best Practice Test Ever')).toBeTruthy();
});

Since it uses shallow, it won't render the thing inside Provider. However, it's easy to work around that using:

it('renders page', () => {
    wrapper = shallow(<PracticeTestStartPage courseTakingStore={ courseTakingStore }
                                             startQuiz={ startQuiz } quiz={ quiz } />);
    wrapper = wrapper.children().shallow();
    expect(wrapper.text().includes('Best Practice Test Ever')).toBeTruthy();
});

Popular posts from this blog

Drawing Sierpinski's Triangle in Minecraft Using Python

In his keynote at PyCon, Eben Upton, the Executive Director of the Rasberry Pi Foundation, mentioned that not only has Minecraft been ported to the Rasberry Pi, but you can even control it with Python. Since four of my kids are avid Minecraft fans, I figured this might be a good time to teach them to program using Python. So I started yesterday with the goal of programming something cool for Minecraft and then showing it off at the San Francisco Python Meetup in the evening.

The first problem that I faced was that I didn't have a Rasberry Pi. You can't hack Minecraft by just installing the Minecraft client. Speaking of which, I didn't have the Minecraft client installed either ;) My kids always play it on their Nexus 7s. I found an open source Minecraft server called Bukkit that "provides the means to extend the popular Minecraft multiplayer server." Then I found a plugin called RaspberryJuice that implements a subset of the Minecraft Pi modding API for Bukkit s…

Apple: iPad and Emacs

Someone asked my boss's buddy Art Medlar if he was going to buy an iPad. He said, "I figure as soon as it runs Emacs, that will be the sign to buy." I think he was just trying to be funny, but his statement is actually fairly profound.

It's well known that submitting iPhone and iPad applications for sale on Apple's store is a huge pain--even if they're free and open source. Apple is acting as a gatekeeper for what is and isn't allowed on your device. I heard that Apple would never allow a scripting language to be installed on your iPad because it would allow end users to run code that they hadn't verified. (I don't have a reference for this, but if you do, please post it below.) Emacs is mostly written in Emacs Lisp. Per Apple's policy, I don't think it'll ever be possible to run Emacs on the iPad.

Emacs was written by Richard Stallman, and it practically defines the Free Software movement (in a manner of speaking at least). Stal…

JavaScript: Porting from react-css-modules to babel-plugin-react-css-modules (with Less)

I recently found a bug in react-css-modules that prevented me from upgrading react-mobx which prevented us from upgrading to React 16. Then, I found out that react-css-modules is "no longer actively maintained". Hence, whether I wanted to or not, I was kind of forced into moving from react-css-modules to babel-plugin-react-css-modules. Doing the port is mostly straightforward. Once I switched libraries, the rest of the port was basically:
Get ESLint to pass now that react-css-modules is no longer available.Get babel-plugin-react-css-modules working with Less.Get my Karma tests to at least build.Get the Karma tests to pass.Test things thoroughly.Fight off merge conflicts from the rest of engineering every 10 minutes ;) There were a few things that resulted in difficult code changes. That's what the rest of this blog post is about. I don't think you can fix all of these things ahead of time. Just read through them and keep them in mind as you follow the approach above.…