2

I'm writing test for the below component with React Testing Library. And when I checked the test coverage, it showed me that coverage for the function passed to the prop 'errorRender' has not been covered.

Below is my component :

import React from 'react'; 
import Icon from './Icon';
import Image from './Image';

function Container(props) {
  const {img, caption} = props;

  return (
    <figure>
      <div>
        <Image
          img={img}
          errorRender={() => (
            <div>
              <div>
                <Icon/>
              </div>
            </div>
          )}
        />
      </div>
  {caption && (
    <figcaption>{caption}</figcaption>
  )}
    </figure>
  );
}

export default Container;

How could I test the function passed to the errorRender prop? I was thinking to avoid testing the child Component 'Image' as it would be tested separately, but dropping this doesn't give me 100% test coverage which is required in our project.

I was mocking the 'Image' child component as below in my test file :

jest.mock('./Image', () => {
    return function Image() { 
        return <div> Image </div>
        
    };
});

Then did this :

jest.mock('./Image', () => {
    return function Image({errorRender}) { 
        errorRender();  
        return <div> Image </div>
        
    };
});

Although the above mocking is giving me 100% test coverage but being new to the React Testing, I'm unsure is it the right way to do so? Should we test the values passed to the child component in parent's component test file? And what should be the right way ?

user3760959
  • 457
  • 1
  • 6
  • 18
  • `Image` component should be tested in isolation from other components, this is what a unit test is for, a single unit/component of code. Also, don't mock the *thing* you are wanting/trying to test. Also, your code coverage goal should be closer to something around the 80% range, don't go chasing waterfalls. – Drew Reese Oct 06 '21 at 08:13
  • Thanks for reply. But function coverage required in our project is 100%. If I don't test the 'Image' component's errorRender function , then test coverage doesn't meet the project's guidelines. – user3760959 Oct 06 '21 at 08:21
  • 100% code coverage across the board is a ridiculous goal and is generally considered a waste of development resources. I also didn't say not to test that function, just do it in a unit test suite for the `Image` component. – Drew Reese Oct 06 '21 at 08:23
  • Agree with your point, but this is what we have to stick with in our project. The 'Image' component's test cases have already been written. It's the coverage of the parent file, which is not reflecting function coverage as 100%. I'm mocking the child component 'Image' (last snippet above) and calling the errorRender prop directly, is it right approach? – user3760959 Oct 06 '21 at 08:31
  • 1
    Oh, I see, it's the *actual* anonymous function you're trying to get coverage on. Yeah, sure, you could mock the `Image` implementation to invoke the `errorRender` function to get the coverage, but to be honest I don't see any value in that test or additional coverage. It *may* be more correct to use a `useEffect(errorRender, [])` to invoke it on mount. Good luck. – Drew Reese Oct 06 '21 at 08:37

0 Answers0