Unable to cover unit test cases fo React components having props

Viewed 83

I have a component with the below code:-

import React from "react";
import { Box, Grid } from "@material-ui/core";
import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";
import SearchOutlinedIcon from "@material-ui/icons/SearchOutlined";
import blue from "@material-ui/core/colors/blue";
const BackwithSearchIcon = (props) => {
    const blue_900 = blue[900];
    const searchOption = ()=>{
            return (props.searchOption)?(
                <Grid item>
                    <Box mr={2}>
                        <SearchOutlinedIcon color="primary" />
                    </Box>
                </Grid>    
            ):(null)
    }
 
    return (
        <Grid container>
            <Grid item>
              <Box>
                <ArrowBackIosIcon
                  color="primary"
                  onClick={()=>props.goBack()}
                />
              </Box>
            </Grid>
            <Grid item xs>
              <Box
                component="span"
                fontSize={18}
                fontWeight="fontWeightMedium"
                color={blue_900}
                onClick={()=>props.goBack()}
              >
                Back
              </Box>
            </Grid>
            {searchOption()}
        </Grid>
    )
}

export default BackwithSearchIcon;

and I am writing unit test cases with below code:-

test('renders as expected', () => {
    const goBack = () => {}
    const renderer = new ShallowRenderer()
    const result=(<BackwithSearchIcon searchOption={true} goBack = {goBack}></BackwithSearchIcon>)
    expect(result.props.searchOption).toBe(true);
});

When I am generating coverage report statements are not getting covered.the coverage is 14% Coverage Report

I am rendering the whole component ive tried with sending searchOption as false but still percentage is not working

0 Answers
Related