0

I have a Parent component which returns a Child component. The Child component returns null but reads the URL and fires off a Redux action: 

    const Parent = () => {
      return (
        <>
            <h1>Title</h1>
            <Child />
        </>
      );
    };


    const Child = () => {
      componentDidMount(){
        // Do Redux stuff 
      }

      return null;
    };

I'm trying to write tests for Parent. How can I check that Child was returned? All the examples Ive seen test for HTML but this won't work for my use case.

Evanss
  • 23,390
  • 94
  • 282
  • 505
  • In this case, snapshots or html tests will not be that helpful. Really you want to mock the redux action, and ensure that when Child is mounted in your test, the mocked function is called – Wolfie Oct 25 '18 at 04:18
  • That sounds like how I would test Child. To test Parent I just want to know that it returns Child. Is this not a standard thing? I'm new to testing but I would have thought this would be a common practice? – Evanss Oct 25 '18 at 04:20
  • You might want to check out this answer: https://stackoverflow.com/questions/47259061/jest-enzyme-test-a-react-component-that-returns-null-in-render-method – Wolfie Oct 25 '18 at 04:22
  • Furthermore, if you are testing with enzyme, you can in fact check if children/components are equal to null – Wolfie Oct 25 '18 at 04:22
  • Again that looks to me like how I could test Child. I cant see how I would test if Parent had returned Child with that method. – Evanss Oct 25 '18 at 04:28

0 Answers0