Enzyme test nested component's method

jest test nested components
jest mock nested component
testing react components with jest and enzyme
jest test component inside component
enzyme mount not rendering child components
enzyme test tooltip
enzyme test map
testing nested connected components

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 ?


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

Testing nested components in React with Jest and Enzyme, We've been able to successfully test our main App component, however, we've been running into issues with rendering nested components. As you can see  Working through issues with testing nested components in React with Jest and Enzyme.


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

Testing Nested Component With Enzyme Inside React & Redux, For example I have a component ExampleComponent that has mounts another connected component (i.e. container). When I try to test ExampleComponent by  I was hoping that I would be able to understand how to test nested components in a react app after this, but I do not. I am trying to use Jest and Enzyme to test a component that’s nested inside another. I’ve been trying to solve my issues by wrapping the component with a context provider but that has not resolved the issue so far. Reply


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

Testing Nested Components In A React App, I am trying to use Jest and Enzyme to test a component that's nested inside another. I've been trying to solve my issues by wrapping the  Testing React Components with Enzyme and Jest. Enzyme is an open source JavaScript testing utility by Airbnb that makes it fun and easy to write tests for React. In this article, we will be going through writing tests for React using Enzyme and Jest.


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)

Issues with nesting components · Issue #910 · enzymejs/enzyme , Namely, I want to check the contents of a nested component and get a TestFixture, Test } from "alsatian"; import { shallow } from "enzyme";  To understand Enzyme's key strengths, let's dive a little into how it simulates components and DOM elements. Although based off react-test-utils, there is enough abstraction that the rendering of a component comes down to 3 functions - shallow, mount and render. Basically ; Shallow rendering: Is useful to test a component in isolation of every other. In the typical React pattern of smart and dumb components, shallow rendering is usually used to test 'dumb' components (stateless components


Testing connected components that have nested connected , Testing connected components that have nested connected Component.js' import { mount } from 'enzyme' it('should mount without  if is and inmidiate child you can get its props by doing component.find(ChildType).first().[prop('propName')|props()] where childType is the component class to look for i am using first assuming it would be the first instance but there is also, last and at. if the child component you want to test is deeply nested it won't be rendered at all. but that is not bad since is best to not test deeply nested components, rather to keep your tests shallow, unless you want to interact with the DOM i.e


Testing React Components with Enzyme and Jest ― Scotch.io, Enzyme is an open source JavaScript testing utility by Airbnb that For components with deeply nested children components, a change in  I would consider writing tests for only your parent class, and then a separate test file to only test your child. Once you have mounted you component using: const component = mount(<Child>); you then have access to it's methods using: component.instance().methodname You can then do stuff like override it with jest.fn() and test appropriately.


Why I Always Use Shallow Rendering, Including all the nested Components and calling all the lifecycle methods I am using Enzyme, React-test-renderer, Cypress, Nightwatch, Jest,  Well, I had failed to notice that I was actually wrapping the component in a higher order component just before exporting. In my case it was a react-intl wrapper. So in this instance, I was shallow rendering the react-intl component and stopping short of rendering the component I was actually trying to test. Obviously this isn't a problem with