Enzyme test nested component's method

Question

I'm trying to use Enzyme to test a component's method. I know the typical way to do this is to use Enzyme's instance() method.

The thing is, this only work for root component and my component need to be wrapper in two Context provider to render (namely, react-router and apollo client).

  const wrapper = mount(
    <ApolloProvider client={client}>
      <MemoryRouter initialEntries={["/login"]}>
        <AuthFormContainer />
      </MemoryRouter>
    </ApolloProvider>
  );

How can I test methodA of AuthFormContainer in that case ?

you should write a separate test case for the AuthFormContainer — Shubham Khatri, Jun 08 '18 at 17:11
@ShubhamKhatri I think we do need to test ApolloProvider if this component created by apollo team, because it was already tested. ThéoChampion if it is you custom component test it separately — Palaniichuk Dmytro, Jun 12 '18 at 08:16
@ShubhamKhatri Yes, but my component need to be wrapped by `apolloProvider` to be able to render (`authFormContainer` is a consumer) — Théo Champion, Jun 12 '18 at 08:19
@ThéoChampion, What I meant to say is that if you want to test the function within AuthFormContainer, you need to write test cases for that component instead of writing it for the component that renders ApolloProvider — Shubham Khatri, Jun 12 '18 at 08:21
@ShubhamKhatri Writing tests for `AuthFormContainer` is what i'm trying to do here — Théo Champion, Jun 12 '18 at 08:25
can you show how your AuthFormContainer looks like and how have you written the tests — Shubham Khatri, Jun 12 '18 at 08:27

score 10 · Answer 1 · answered Jun 17 '18 at 05:07

For the unit testing, you should not be worried about the other components. But if you must, you may use the shallow rendering. Here is what I did:

const wrapper = shallow(
    <ApolloProvider client={client}>
      <MemoryRouter initialEntries={["/login"]}>
        <AuthFormContainer />
      </MemoryRouter>
    </ApolloProvider>
);

Get the Component tree for the AuthFormContainer using:

const authFormControllerTree = wrapper.find(MemoryRouter).shallow().find(AuthFormContainer).shallow()

Now to test the methodA in the AuthFormContainer, you may just do:

authFormControllerTree.instance().methodA();

score 1 · Answer 2 · answered Jun 12 '18 at 08:13

1

Try to find(ApolloProvider).dive() - and console.log it to see the tree inside.

answered Jun 12 '18 at 08:13

Palaniichuk Dmytro

2,943
12
36
66

2

if I do that, i get `TypeError: wrapper.find(...).dive is not a function`, any idea of what is going on ? – Théo Champion Jun 12 '18 at 08:24
who is you wrapper? – Palaniichuk Dmytro Jun 12 '18 at 08:30
can you find `wrapper.find(ApolloProvider)`? – Palaniichuk Dmytro Jun 12 '18 at 08:36
Yes, this return me a `ReactWrapper { length: 1 }` – Théo Champion Jun 12 '18 at 08:37
take a look to this one http://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html probably you miss something. – Palaniichuk Dmytro Jun 12 '18 at 08:40
`dive` method can be used only with shallow rendering which can't work for me as I'm obligated to wrap my component in contexts providers – Théo Champion Jun 12 '18 at 08:52
In one case use shallow and in one use mount. Two separate test. – Palaniichuk Dmytro Jun 12 '18 at 08:56
if I do `const wrapper = shallow();` , then `console.log(wrapper.instance())` return `null`, any idea of what is wrong ? – Théo Champion Jun 12 '18 at 08:58
try `const wrapper = shallow( );` – Palaniichuk Dmytro Jun 12 '18 at 09:00
This return me the `ApolloProvider` ReactComponent instance – Théo Champion Jun 12 '18 at 09:03
what about props `find(ApolloProvider).props()` – Palaniichuk Dmytro Jun 12 '18 at 09:04
Yes, this return me `ApolloProvider`'s props – Théo Champion Jun 12 '18 at 09:11
Should I dig into `ApolloProvider` children's props to dive ? Seems a bit hacky – Théo Champion Jun 12 '18 at 10:48
1

TypeError: wrapper.find(...).dive is not a function If this is the error you are getting, then it might be because you are using `mount` instead of `shallow`. – Akhil Gautam Nov 19 '20 at 10:16

score 0 · Answer 3 · answered Jun 16 '18 at 16:25

For React components you always write Unit Tests. According to this answer: https://stackoverflow.com/a/652382/2873331:

Unit testing simply verifies that individual units of code (mostly functions) work as expected...

So here you should try to Test functionality of AuthFormContainer and not whether react-router and apollo client are injecting context correctly or not. Your test case should test: Given the context to the AuthFormContainer, do its instance methods work as expected or not.

To inject context you can use Enzyme's shallow method.

it('should work as expected', () => {
    const wrapper = shallow(< AuthFormContainer />, {
        context: { ... }, // pass expected context here

    });
    wrapper.instance().method(); //extract the required method by using instance
    ...
  });

Reference: http://airbnb.io/enzyme/docs/api/shallow.html

On a side note, do not use mount unless you actually want to test things at DOM level. mount makes your tests very slow. Always prefer shallow.

Reference: http://airbnb.io/enzyme/docs/api/mount.html

score 0 · Answer 4 · answered Jun 17 '18 at 18:48

0

Always test wrapper component differently than connected component. Export wrapper component and import to test file and test as you are doing but shallow ( I prefer)

answered Jun 17 '18 at 18:48

Pawan Gangwani

182
8

Enzyme test nested component's method

4 Answers4

Linked