Покрытие кода для стилизованных компонентов с использованием реагирующей-тестирующей библиотеки

Question

Я написал модульный тест для стилевых компонентов, используя библиотеку реагирования-тестирования, и рассмотрел почти все возможные сценарии, но не уверен, почему существует низкий охват кода. Отчет показал некоторые красные линии на стиле, который не покрыт. Кто-нибудь знает, как избавиться от подобных проблем? Я стараюсь изо всех возможных тестовых случаев, но не могу решить проблему.

Реагирующий компонент

import * as React from "react";
import styled from "styled-components";

/**
 * Wrapper box for the component.
 */
const StyledBox = styled("div")`
  display: -ms-flexbox; /* IE10 */
  display: flex;
  padding: 12px;
  background-color: #ffffff;
`;

/**
 * Search icon and aligned to the left of the input control.
 */
const StyledIcon = styled("img")`
  height: 24px;
  width: 18px;
  text-align: center;
`;

/**
 * Input element which will hold the search text entered by the user.
 */
const StyledInput = styled("input")`
  color: #524f53;
`;

interface ISearchBoxProps {
  id: string;
  disabled?: boolean;
  maxLength?: number;
  placeholder?: string;
  required?: boolean;
  style?: object;
  searchIconUrl: string;
}

/**
 * SearchBox component holds a simple input element with search icon on its left.
 */
class SearchBox extends React.PureComponent<ISearchBoxProps> {
  render() {
    const {id, disabled, placeholder,maxLength,style,searchIconUrl,
    } = this.props;

    return (
      <StyledBox style={style}>
        <StyledIcon src={searchIconUrl} />
        <StyledInput
          id={id}
          type="text"
          disabled={disabled}
          maxLength={maxLength}
          placeholder={placeholder || "Search"}
        />
      </StyledBox>
    );
  }
}

export default SearchBox;

Юнит-тестирование:

import * as React from "react";
import { render } from "react-testing-library";
import SearchBox from "../SearchBox";

const componentAttributes = {
  id: "searchBox",
  maxLength: 40,
  placeholder: "Search Assets",
  searchIconUrl: "searchIconUrl",
  style: {
    color: "#BAB9BA",
  },
};

describe("<Searchbox />", () => {

  it("Should not be null", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container).not.toBeNull();
  });

  it("Should have DIV wrapper", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.nodeName).toBe("DIV");
  });

  it("Should set the style to the wrapper", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("div").getAttribute("style")).toBe("color: rgb(186, 185, 186);");
  });

  it("Should have image element inside it", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("img").nodeName).toBe("IMG");
  });

  it("Should have img with search icon url", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("img").getAttribute("src")).toBeTruthy();
  });

  it("Should have input element inside it", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").nodeName).toBe("INPUT");
  });

  it("Should have input element having id attribute ", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").getAttribute("id")).toBeTruthy();
  });

  it("Should have input element having id attribute ", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").getAttribute("id")).toBeTruthy();
  });

  it("Should have input element having disabled attribute to be null", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").getAttribute("disabled")).toBeNull();
  });

  it("Should have input element having maxLength attribute 40", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").getAttribute("maxLength")).toBe("40");
  });

  it("Should have input element having placeholder text 'Search Assets'", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").getAttribute("placeholder")).toBe("Search Assets");
  });

  it("Should have input element having placeholder text 'Search' when no placeholder is passed", async () => {
    const { container } = render(<SearchBox id="searchbox" searchIconUrl="" />);
    expect(container.querySelector("input").getAttribute("placeholder")).toBe("Search");
  });

});