Testing a Redux-connected component using Enzyme

[mrsaeeddev]

Enzyme

i) What is the least error-prone way to test a Redux-connected Componet using Enzyme?
I have checked many links and articles but haven't found a satisfactory answer. It's confusing me a lot.
ii)How can I test whether my component is getting certain props or not using Enzyme?

Versions

• React-Boilerplate : Current Version
• Node/NPM: ^6
• Browser: Chrome
• Enzyme: Current Version

[ljharb]

const wrapper = shallow(<ConnectedComponent />).dive();

and then make your assertions on the wrapped component.

[gecko25]

Any update to this? I secondly this very strongly. Everything I have tried does not work.

I set the context like shown in the docs -- http://airbnb.io/enzyme/docs/api/ReactWrapper/setContext.html

This also looked promising
https://stackoverflow.com/questions/37798741/nested-components-testing-with-enzyme-inside-of-react-redux

But usually everything leads me back to:

Invariant Violation: Could not find "store" in either the context or props of "Connect(DatePicker)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(DatePicker)".

😢

[ljharb]

There's no update needed; wrap your connected component and use .dive().

[gecko25]

Two things:

1. This is not working for me.

const wrapper = shallow(<ConnectedDatePicker />).dive();

I still get the same ole error:

Invariant Violation: Could not find "store" in either the context or props of "Connect(DatePicker)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(DatePicker)".

2. I need to use mount anyways. If I try something like:

const wrapper = shallow(<ConnectedDatePicker store={store}/>).dive();

I get

Method “props” is only meant to be run on a single node. 0 found instead.

when my test tries to use the API method find. (wrapper.find('#startDate').simulate('focus');)

I am assuming it cannot find it, because it is trying to find an grandchild element of my DatePicker component.

[ljharb]

I'd generally recommend using only shallow as much as possible, and only making assertions on which components your thing renders - in other words, if A renders B which renders C, your A tests shouldn't know anything about C, and should only be asserting that A renders B with the right props. Your B tests should be asserting things about C.

[gecko25]

Right. Makes sense. What I am trying to do is more of an integration test.

I am sort of new to making tests. Would this thinking be more correct:

If my DatePicker component has child components that send events up to my DatePicker Component (for example, when a user selects July 21, 2017 a <div/> is clicked & the event bubbles up and eventually is handled by my DatePicker component's onDateChange function).

For my test, rather than simulating that click event. I should be directly testing my onDateChange function with mock data under various circumstances.

(I apologize if this got off scope a little bit, just trying to understand).

[ljharb]

Yes, you definitely should be unit-testing your onDateChange.

It's your date picker component's tests' job to ensure that onDateChange is called at the proper time.

[gecko25]

thank you, this has been very helpful

[shakiba]

@ljharb Is there any way to mock the inner component? Instead of shallow/dive.

[ljharb]

@shakiba Mocks make tests more brittle; but shallow rendering is kind of like automocking. Can you elaborate on what you're trying to achieve?

[shakiba]

@ljharb The reason that shallow does not work for me is that there are other nested components which I want to be rendered, such as bootstrap-react layout components. Basically instead of including specific components in rendering using dive, I want to exclude few components from being rendered. I solved it using jest.mock, but if you have any other idea please let me.

[ljharb]

enzyme v3 and React 16 will provide an API for that; short of that, that's probably the best option.

[przemuh]

Maybe it will be helpful for someone:

If you want to find if connected component is rendered you can find it by Connect(Component) selector.

Example (StylePicker is connected with the store):

index.js

render() {
        return (
            <div>
                <Header>Choose style</Header>
                <StylePicker {...{ styles }}/>
                <NavigationButtons
                    onPrev={this.goToHome}
                    onNext={this.goToLayoutPicker}
                />
            </div>
        );
    }

index.test.js

    it('should render <StylePicker>', () => {
        expect(shallow(<MainComponent />).find('Connect(StylePicker)')).toHaveLength(1);
    });

[ljharb]

@przemuh better would be shallow(<MainComponent />).dive().

[mstorus]

@ljharb regarding the question in #1002 (comment), don't we still need to use something like redux-mock-store in order for shallow(<MainComponent />) to work? whether or not we use .dive() won't affect that shallow(<MainComponent />) expects to have a store in either context or props, right?

[ljharb]

@mstorus correct, it won't affect that.

[dschinkel]

sometimes you might have to double dive (someContainer.dive().dive() or whatever before you can start working on the component) depending on how your connected container is setup.

For example lets say you're wrapping your connected container in another wrapper like this, you'll possibly have to double dive I've found because you need to now get past the ReactTimeout HOC and dive to get past the react-redux connect wrapper HOC in order to work with the container.

const TimeoutLive = ReactTimeout(connect(mapStateToProps, {
  fetchLive,
  fetchLivePanel,
  fetchLiveVideo,
  clearLive,
  saveLiveRestart,
})(Live));

[ljharb]

Totally correct - you need one .dive() per HOC.

[michaelBenin]

Is there any syntactic sugar available for components wrapped with react-router's withRouter method?

Instead of a test like:

shallow(
        <StaticRouter context={{}}>
          <IndexPage />
        </StaticRouter>
      ).dive().length

[ljharb]

@michaelBenin .dive() is the sugar.

[trevorwhealy]

If you don't need access to the redux store as part of your unit test, don't forget that you can also export the React component individually in addition to exporting the connected variant by default.

export class Component extends React.Component {}

export default connect(({ someReducer }) => ({
  ...
}))(Component)

In your test, just extract the "pure" Component rather than the connected one:

import { mount } from 'enzyme'  
import { Component } from '../components/Component'
...
mount(<Component />)

[ljharb]

You shouldn't do that, however, because if it's never used by itself in production, there's no value in testing it by itself. Use .dive().

[trevorwhealy]

I wouldn't say that it has no value @ljharb but I also know what you mean. Using shallow with dive was not working for my use case. I got the error: Method “props” is only meant to be run on a single node. 0 found instead

renderComponent = (props = {}) => shallow(<Component {...props} />).dive()

const dispatchMock = jest.fn()
const component = renderComponent({ dispatch: dispatchMock })

component.find('form').simulate('submit')
expect(dispatchMock.mock.calls.length).toBe(1)  

[ljharb]

@trevorwhealy that's worth exploring - i don't see any .props() calls in that code, nor is dispatchMock used anywhere - but it doesn't change that exporting the "pure" component just for testing isn't a good practice.

[trevorwhealy]

@ljharb sure we can agree on that. updated the code to reflect the implementation more closely.

[grahaml]

Referencing @gecko25's comment above - I get that same error...

shallow(<Provider store={store}><MyContainer/></Provider>).dive()

...

Invariant Violation: Could not find "store" in either the context or props of "Connect(MyContainer)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(MyContainer)"

The connected component has some internal state that I want to test.

[WeishenMead]

What happens if there are multiple children of the component, one of which is connected?

<Wrapper>
    <Component/>
    <ConnectedComponent/>
</Wrapper>

In that case .dive() won't work because I have multiple non-dom children.

I can get around this by doing

shallow(<Wrapper/>).children().at(1).dive()

but that makes for a really fragile test. I suppose in that situation I can do what was suggested above:

shallow(<Wrapper/>).find('Connect(ConnectedComponent)').dive()

but I'm curious if there's a better solution.

[WeishenMead]

Redux's connect creates a new higher-order component wrapping the component you want. So dive accessed the one child of the Redux wrapper, which is the actual component you're looking for.

[viksok]

@przemuh better would be shallow(<MainComponent />).dive().

had a similar issue.
using dive() does not resolve it, but explicit store={mockStore({})} prop does.
shallow(<MainComponent store={mockStore({})}/>)

with dive() I get such an error:
Invariant Violation: Could not find "store" in either the context or props of "Connect(UserGuideButton)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(UserGuideButton)".

[ljharb]

you may need to pass the context manually when using dive, pending a known issue

[BalasubramaniM]

Finally, I somehow made it work which may help someone. Just pass your store to your component like said above.

import Home from "../components/Home";
import { store } from "../store";

describe("Home", () => {
	it("Should render component", () => {
		const wrapper = shallow(<Home store={store} />);
		expect(wrapper.length).toEqual(1);
	});
});

But after doing it so, I met an another error called,

Invariant Violation: Browser history needs a DOM

After searching for other answers in SO, I found that, I was using createBrowserHistory throughout out my application, in store, whereas createMemoryHistory is more than enough to test unit test cases.

All the test cases have been passed, after changing it so.

Note: I am just new to Jest and correct me if it go wrong at any specific cases.

[hutber]

store

Where did you get the store from?

[ncpope]

I too struggled with this one for a bit piecing together what I found on various related results. This is my working test: https://gist.github.com/ncpope/a9da1698d919108f104cd1d7e4bec5e9

I am additionally using Redux Mock Store to achieve these results.

[shorif2000]

how do i use shallow with mount. i am trying to do this

[karolisgrinkevicius-home24]

I have written the helper which I use once I need the redux connected components to test. Here it is:

import { Provider } from 'react-redux';
import { mount } from 'enzyme';
import configureMockStore from 'redux-mock-store';

const defaultStore = { responsive: { fakeWidth: 1200 } };
const mockedStore = configureMockStore()(defaultStore);

export const mountWithProvider = children => (store = mockedStore) =>
  mount(<Provider store={store}>{children}</Provider>);

Then you're able to use it as follows:

const props = {};
const wrapper = mountWithProvider(<SomeConnectedComponent {...props} />)();
expect(wrapper.exists()).toBe(true);

Also you can set custom state of the store to override the default one defined in the helper scope:

const myCustomState = {
  myName: 'test',
  myAge: 9999
};
const wrapper = mountWithProvider(<SomeConnectedComponent {...props} />)(myCustomState);

[RrNn]

@ljharb this works for me const wrapper = shallow(<ConnectedComponent />).dive();, but I'm curious to know why? My scenario was, a component that has another component as a child, both of which are connected. So the code looks something like

class Session extends React.Component {
...
render() {
<div>
...
<MealSessionModal propOne={propOne} />
...
<div>
}
}

MealSessionModal is connected too, remember.
So in my tests, I did

const wrapper = mount(
    <BrowserRouter>
      <Sessions store={store} {...props} />
    </BrowserRouter>
  )

but this was throwing th error
Invariant Violation: Could not find "store" in either the context or props of "Connect(MealSessionModal)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(MealSessionModal)".
which was pointing to the child MealSessionModal. so I ended up using

const wrapper = shallow(<Sessions store={store} {...props} />).dive()

which worked fine. My other question is, how could I use the mounted parent Sessions in my tests without using shallow and then diving? And why does shallowing and diving work?

[mmaya]

const myCustomState = {
  myName: 'test',
  myAge: 9999
};
const wrapper = mountWithProvider(<SomeConnectedComponent {...props} />)(myCustomState);

Thanks so much! Your solution solved most of my problems :D

[951565664]

Two things:

1. This is not working for me.

const wrapper = shallow(<ConnectedDatePicker />).dive();

I still get the same ole error:

Invariant Violation: Could not find "store" in either the context or props of "Connect(DatePicker)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(DatePicker)".

1. I need to use mount anyways. If I try something like:

const wrapper = shallow(<ConnectedDatePicker store={store}/>).dive();

I get

Method “props” is only meant to be run on a single node. 0 found instead.

when my test tries to use the API method find. (wrapper.find('#startDate').simulate('focus');)

I am assuming it cannot find it, because it is trying to find an grandchild element of my DatePicker component.

Has the first question been solved? I only saw you discussing mount and shallow，And I still report an error now.

[olyayakimovich]

I had the same problem. This solution worked for me:
const wrapper = mount(<Provider store={store}><ConnectedComponent /></Provider>, { context: { store }, childContextTypes: { store: PropTypes.objectOf(PropTypes.any), }, });

[chadlof]

I'd generally recommend using only shallow as much as possible, and only making assertions on which components your thing renders - in other words, if A renders B which renders C, your A tests shouldn't know anything about C, and should only be asserting that A renders B with the right props. Your B tests should be asserting things about C.

The problem I have ai A is wrapped with withRouter and connect HOC's
In order to test A I need to go two layers down

[adrianbw]

const wrapper = mountWithProvider(<SomeConnectedComponent {...props} />)(myCustomState);

This was super helpful. Thank you.

[chulijimmi]

I have written the helper which I use once I need the redux connected components to test. Here it is:

import { Provider } from 'react-redux';
import { mount } from 'enzyme';
import configureMockStore from 'redux-mock-store';

const defaultStore = { responsive: { fakeWidth: 1200 } };
const mockedStore = configureMockStore()(defaultStore);

export const mountWithProvider = children => (store = mockedStore) =>
  mount(<Provider store={store}>{children}</Provider>);

Then you're able to use it as follows:

const props = {};
const wrapper = mountWithProvider(<SomeConnectedComponent {...props} />)();
expect(wrapper.exists()).toBe(true);

Also you can set custom state of the store to override the default one defined in the helper scope:

const myCustomState = {
  myName: 'test',
  myAge: 9999
};
const wrapper = mountWithProvider(<SomeConnectedComponent {...props} />)(myCustomState);

Cool bro, now I can see the child props

[Unicornelia]

Providing an example of using redux-mock-store, since this thread still comes up a lot in searches.

This example includes redux-thunk, since it's a common middleware used with Redux (and is mentioned in the Advanced section of the Redux tutorial). If you don't use redux-thunk, just remove that part.

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const store = configureStore([
    thunk,
])();

const wrapper = shallow(
  <MyComponent {...props} store={store} />
).dive();

Tested with "redux-thunk": "^2.1.0" and "redux-mock-store": "^1.5.1".

Note that using .dive() ensures that you are testing the connected component (which is actually used in production), rather than the unconnected component (which may not be directly used in production).

Omg, thank you! After hours of trying, this finally worked. <3

[KarinGarciaZ]

@trevorwhealy This worked, but what if I have inner components we I only export the connect(component)? This only would help with the route component, so how do I handle that?
Thanks.

If you don't need access to the redux store as part of your unit test, don't forget that you can also export the React component individually in addition to exporting the connected variant by default.

export class Component extends React.Component {}

export default connect(({ someReducer }) => ({
  ...
}))(Component)

In your test, just extract the "pure" Component rather than the connected one:

import { mount } from 'enzyme'  
import { Component } from '../components/Component'
...
mount(<Component />)

[ljharb]

@KarinGarciaZ .dive().

[carolozar]

I am getting the same issue, I am using IntlProvider

this is how I mount the component

function nodeWithIntlProp(node) {
  return React.cloneElement(node, { intl });
}

export function mountWithIntl(node) {
  return mount(
    <IntlProvider locale={en.locale} messages={en.messages}>
      {nodeWithIntlProp(node)}
    </IntlProvider>,
  ).dive();
}

the .dive() doesnt work with this, now I get this error
Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

[ljharb]

@carolozar use the wrappingComponent option to pass the IntlProvider. You shouldn't need nodeWithIntlProp at all.

[chase2981]

What if I don't want to test the redux because we are undergoing a process of normalizing our store and testing the connected components with a mock store makes our tests extremely brittle. We change the store and now we got tens if not hundreds of tests failing.

To be clear, I'm just looking for a non hacky standard way of testing a non-connected component that has connected component children.

[ljharb]

@chase2981 if you use the component in your real app without the connection wrapper, then test it that way - if not, then it’s correct that hundreds of tests start failing when you change the store in a breaking way.

That friction is a useful indicator that perhaps you should design APIs so they can evolve in non-breaking ways :-)

[chase2981]

I disagree. If we are changing redux and only redux, we haven’t even touched the params or the components—it shouldn’t break all our component tests. As a team we elected to move away from that approach for this very reason. Unit tests are supposed to be done in a way to where they flex with your code changes, and only break if the exact functionality you are trying to test changes. In our case we were just trying to test components and like pushing btns and inputting text and asserting it calls the onChange callback and stuff like that. With the connected component tests, you can’t even really assert on the dang action payload being emitted, and you damn sure can’t mock some http call in an action that is being called somewhere. Our development manager was even questioning whether tests were even worth it in react to me after this latest episode. So we’re moving to true unit tests now. To where they will only break if we change the component—not the redux. The redux tests can break if we change the redux. However, the thing we still run into now is when we have a connected component which we export the non connected component from for test purposes, then we mount the non connected component—it still throws a fit cuz one of its children is connected. I know you can do shallow but I swear it still happens in that case, and shallow just isn’t the same. It doesn’t knock out as much test coverage either. So just recently I started resorting to mocking the inner container components using jest.mock and instead having them return a div, which works and all, but say you relocate some inner component dependency to a new folder somewhere, the ide doesn’t pick up on the jest mock paths and therefore doesn’t know to update those particular paths, so even that jest mock inner connected component approach seems a little flaky. Tbh coming from angular world where you have complete control over every little thing in their unit tests, it just seems like react/react-redux doesn’t really have their shit together in terms of true valuable unit testing.

[chase2981]

This guy recommends not even testing your container components and just structuring your app a little differently and testing everything else individually. https://link.medium.com/1Cd79oA3qab

[ljharb]

The exact functionality you should be trying to test is "how your component works" - the store connection is absolutely part of that.

Proper unit testing does NOT just test "the code under test", it fully integration-tests the thing it's testing.

[QasimRRizvi]

Below solutions are working for me.

const wrapper = shallow(
  <ConnectedComponent />,
  { context: { store } }
).dive();

const wrapper = shallow(
  <Provider store={store}>
    <ConnectedComponent />
  </Provider>
).dive({ context: { store } }).dive();

const wrapper = shallow(
  <ConnectedComponent store={store} />,
).dive();

I've tried all of these but same error

 wrapper = shallow(
      <Provider store={store}><Login /></Provider>
    ).dive({ context: { store } }).dive();

Could not find "store" in the context of "Connect(LoginBase)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(LoginBase) in connect options.