Enzyme: 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)".

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.

[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 https://github.com/airbnb/enzyme/issues/1002#issuecomment-318087732, 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.

[ljharb]

@WeishenMead in that case, find the component and .shallow() it.

[TroySchmidt]

I have two children of a component. One is connected and the second is just a raw img tag. I was checking to make sure the img was there. So before the test would work fine doing wrapper.find(<img />). Now with the latest jest update I have to look for the string 'img' instead. Is this related to this once you add a connected component to a non connected component that you are unit testing?

[ljharb]

@TroySchmidt hmm, wrapper.find(<img />) never should have worked - .find('img') was always the way to find an HTML node.

[TroySchmidt]

@ljharb Well good to know the right way to do it. I just did a bunch of package upgrades and making sure things were working and making the adjustments to stay current. So, I know it was passing at some point in the past. Interesting. It might be because before it was purely a stateless component? idk.

[ljharb]

I'm not entirely sure :-/ it's really confusing to me that it worked, because .find only ever took a selector, which is a string or a component function.

[ashgaliyev]

I have the same issue as @glosee and @gecko25:

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)"

"enzyme": "3.2.0"
"react": "16.1.1"
 "enzyme-adapter-react-16": "1.1.0"

---

Why it happens if the Provider has the store in properties?

[grahaml]

I figured out how to get around the invariant violation. I'm not exactly
sure why it's necessary when you already pass store to Provider, but
this has worked for me. In the first call to dive you can explicitly pass
store in the context. Like so...

const store = mockStore(initialState);
const wrapper = mount(
  <Provider store={store}>
    <MyContainer/>
  </Provider>
const myContainer = wrapper.dive({context: {store}}).dive();

// Now you can do stuff like...
myContainer.instance().someMethod()

Hope this helps. Forgive any typos or bad formatting as i wrote this on my
phone.

Cheers

On Dec 22, 2017 3:26 AM, "Andrey Ashgaliyev" [e-mail]
wrote:

I have the same issue as @glosee https://github.com/glosee and @gecko25
https://github.com/gecko25:

shallow().dive()

...

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

"enzyme": "3.2.0"
"react": "16.1.1"
"enzyme-adapter-react-16": "1.1.0"

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/enzyme/issues/1002#issuecomment-353548158, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABfCI_F5rNYsnLd_6moj27JBiTaTHd3xks5tC2fHgaJpZM4ODY4k
.

[ljharb]

@glosee it's necessary because of #1445 still being broken.

[James-E-Adams]

Thanks @glosee! After digging around for a while, your suggestion is the first that works for me.

@ljharb #1445 seems to be closed. Is #664 the most relevant issue to track this problem?

To me it seems like ideal usage would be

const store = mockStore(initialState);
const wrapper = mount(
  <Provider store={store}>
    <MyContainer/>
  </Provider>
const myContainer = wrapper.dive(); 

without having to provide context for the dive.

[ljharb]

Yes, #664 :-)

[derwaldgeist]

This whole shallow(), dive() ... API is so terribly confusing. I'm scratching my head for hours now to figure out how to test a component that is using react-intl to provide i18n which in itself is controlled by a redux store. So I have to provide all of these HOCs, but still have to call a component method on the wrapped-wrapped component, too. This seems to be quite impossible.

[TroySchmidt]

Oh I remember having issues with react-intl. I don't remember how I worked around it honestly.

[derwaldgeist]

I ended up implementing an additional i18n provider mock that doesn't use redux at all. Did the same for redux and router. I couldn't find any other way to work with shallow() and dive() directly.

[ghost]

I have also faced same issue as @glosee and @gecko25 and @ashgaliyev and tried to all the things mentioned over here but could not find a way to wrap my component with store using shallow API.
And getting error of Invariant Violation:could not find store........

Below is my code snippet

renderedView = shallow( <Provider store={store}> <ChangeLogPanel /> </Provider> ).dive();

Error is

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

[ljharb]

@Divyang-Golaviya See #664.

[ghost]

@ljharb
I got solution for above error for my case.
renderedView = shallow( <Provider store={store}> <ChangeLogPanel /> </Provider> )
I was trying to print HTML in console using method console.log(renderedView .html()). it gives me above error but when I try to use console.log(renderedView .text()) then error went away.

[ljharb]

Use .debug(); .html() does a full render.

[mx781]

While @glosee 's solution seems to be a fine workaround for now - I _had_ to use shallow rather than mount (otherwise getting a "wrapper.dive is not a function" error). Is there a way to do a full mount on the parent before diveing in to get a shallow wrapper? What am I missing?

[ljharb]

If you're using mount, you'd .find down to the component you wanted, and then .mount().

[mjvalade]

I went down this rabbit hole as well until I realized that I was importing my component into the test file incorrectly. I didn't need to test the connected part, just the component itself.

YES: import { MyComponent } from '../MyComponentFile';
NO: import MyComponent from '../MyComponentFile';

[ljharb]

In fact, “correctly” means testing the component you use in production - the connected one.

[mstorus]

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).

[oakis]

I did kind of like @mstorus

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

But with the actual store, not with redux-mock-store.

[Alebron23]

So I have these HOCs around my component like so:
export default muiThemeable()(injectIntl(reduxForm({ form: 'DevicesRegisterForm', validate, })(DevicesRegisterForm)));

and I'm trying to simply test my form in the DevicesRegisterForm.
I want to do a wrapper.find('form').simulate('click') in my test file but I'm having a hard time accessing the form.
The part I'm having trouble on is using the dive and provider like so:
const container = shallowWithIntl(<Provider store={store}><DefaultDevicesRegister {...props} /></Provider>).dive().dive().dive();

I just get down to the connect component like so:
<Connect(Form(DevicesRegisterForm)) muiTheme={{...}} handleSubmit={[Function: mockConstructor]} isSubmitting={false} valid={false} onFormSubmit={[Function: mockConstructor]} intl={{...}} initialValues={[undefined]} touchOnBlur={true} touchOnChange={false} persistentSubmitErrors={false} destroyOnUnmount={true} shouldAsyncValidate={[Function: defaultShouldAsyncValidate]} shouldValidate={[Function: defaultShouldValidate]} shouldError={[Function: defaultShouldError]} shouldWarn={[Function: defaultShouldWarn]} enableReinitialize={false} keepDirtyOnReinitialize={false} updateUnregisteredFields={false} getFormState={[Function: getFormState]} pure={true} forceUnregisterOnUnmount={false} form="DevicesRegisterForm" validate={[Function: validate]} />

but If i try to dive past this part, it just keeps returning the same thing as above.

Does anyone know how to get past this so I can access my form in the DevicesRegister component?

[kumar303]

When you have a lot of HOC's it gets tricky to manage all the dive() statements. It's a bit hacky but I wrote about a shallowUntilTarget() wrapper we use to dive into the right component: https://hacks.mozilla.org/2018/04/testing-strategies-for-react-and-redux/

[Venugopal46]

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();

[wlycdgr]

This worked - thank you! - but, why? The Enzyme documentation on .dive() only states that it "shallow render[s] the one non-DOM child of the current wrapper, and return[s] a wrapper around the result." What am I not understanding/knowing that makes it obvious from this description that calling .dive() will allow access to a component wrapped with Redux's connect()?

[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.

[catnuxer]

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.