How to test child component method with Enzyme?

问题

I have a component like that:

<Parent>
  <Child/>
</Parent>

and <Child/> component have a method foo. I want test the foo method but I don't know how to access it. I tried:

mount(<Parent><Child/></Parent>).props().children.foo

mount(<Parent><Child/></Parent>).children().foo

but both them are undefined. I can't use .instance() because it's not root. I can't mount <Child/> only because the <Parent> add something (react-router's context.router) on context and I need them when init <Child/>. Any idea with this?

回答1:

I prefer shallow mount over full mount from enzyme.

In conjunction with proxyquire to resolve child component (which you want to test) I do

wrapper.find('Child1').props().propName

And test it.

Or I use shallow

mount wrapper.dive()

回答2:

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.

回答3:

This worked for me:

mount(<Parent><Child/></Parent>).find(Child).instance().foo

回答4:

I think your problem is way different from how to test child components.

My first question is: Why are you checking if a child component has a specific method in the parent's component tests?

IMHO you need to have a test specific for this component and, then, in this test you check if the method exists.

Just to not leave without the answer, did you tried .find(Child).instance().foo ?

回答5:

I was able to get a handle on child function like the following, i was looking for the first child to call the function on -

const component = shallow(<Component />);
component.find(Child).first().getNode().props.someChildFunction()

回答6:

I had a similar problem when trying to mock a function on an inner component within a MemoryRouter:

cont wrapper = mount(<MemoryRouter><AvailabilityButtonWithRouter.WrappedComponent vetId={ vetId  } appointment={ availability } /></MemoryRouter>);

I ended up being able to mock the function like so:

const mockFn = jest.fn();    
wrapper.children(0).children(0).instance().reloadCurrentPage = mockFn;

回答7:

I faced a similar problem and I went through mount API by logging. In my use case, my child component(CommonStoresReactions) is wrapped with mobx inject.

const jsx = (
    <Provider {...stores}>
      <CommonStoresReactions>
        <div />
      </CommonStoresReactions>
    </Provider>
)
const wrapper = mount(jsx)

I want to test clearStores method in CommonStoresReactions. Below snippet worked for me.

wrapper
      .find(CommonStoresReactions)
      .instance()
      .wrappedInstance.clearStores()

来源：https://stackoverflow.com/questions/42245215/how-to-test-child-component-method-with-enzyme

标签

javascript

reactjs

react-router

enzyme