mercredi 19 juillet 2017

Testing react and redux with Jest in Jumpsuit app

I've made an app with Jumpsuit, which is essentially a wrapper for React and Redux. I knew React well before making it, but wasn't too familiar with Redux syntax (though I understood it's functionality).

I'm wanting to add tests to my app with Jest, however the syntax for things like actions and reducers are different for Jumpsuit and I'm having issues. Here's a simple Jest file where I'm just trying to import a component and render it, but I'm getting the error "Invariant Violation: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Component)".":

import { Component } from 'jumpsuit';
import React from 'react';
import Index from 'components/index.jsx';
import renderer from 'react-test-renderer';

test('Index renders correctly', () => {
    const component = renderer.create(
        <Index />
    );
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
});

For reference, here's a brief example of some the syntax of Jumpsuit's parts. This is the base App:

import { Render } from 'jumpsuit';
import state from 'state/store';
import App from 'components/index.jsx';

Render(state, <App />);

The 'state' is just a simple object combined of all the individual state components, which look like this:

import { State } from 'jumpsuit';

export default State('graph', {
    initial: {
        data: null
    },

    setGraphData: (state, payload) => ({
        data: payload
    })
});

And finally in the components you simply access the state like so:

import { Component } from 'jumpsuit';

export default Component({
    render () {
        return(
            <div>
                { this.props.graphData }
            </div>
        );
    }
},state => {
    return {
        graphData: state.graph.data
    }
});

Any ideas on how I could extract the reducers and store from the state objects? Or test rendering and changing of components? Thanks

Aucun commentaire:

Enregistrer un commentaire