Блог

У меня есть компонент с приведенным ниже кодом:-

 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;

  

и я пишу модульные тестовые примеры с нижеприведенным кодом:-

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

Когда я генерирую отчеты о покрытии, они не покрываются. покрытие равно 14%
Отчет о покрытии

Я рендерю весь компонент, который я пробовал, отправив SearchOption как false, но процент по-прежнему не работает