Shallow test component, complain about required props gotten from mapStateToProps and mapDispatchToProps

0
votes

I would like to shallow test my component, and I know that the shallow test only test one level deep. My problem is that I get warnings because my component is requireing props that is received by mapStateToProps and mapDispatchToProps. This makes me want to know how to properly send this props down to my shallow rendered component without duplicate the methods. I am using jest and enzyme.

1
reactjsreduxenzymejestjs
If you have a clear presentation/container separation, you could easily test the presentation component individually (in which case, I assume all actions could be simple mock functions). Add some of your code to the question. – Or B

1 Answers

2
votes

Let's call your component is ComponentA wrapped in HOC connect of React-Redux (assuming you are using it as there are mapStateToProps and mapDispatchToProps in your question). The traditional way for testing this component is:

  1. Get the wrapped component: The connect have a static property named WrappedComponent, so you get it out like this:

    const ExtractedComponent = ComponentA.WrappedComponent;

  2. Mock the functions and props and pass it like normal props into the extracted component:

    const wrapper = mount(<ExtractedComponent connectFunctionA={mockA} ... />);

  3. Test it like normal component! :)