Stuck what the best way is to do a unit testing on a Hook that checks if there is a matching character between input text and text of api. Only the NOT matching letter will be bold and the matching letter will stay normal. How do I test element that are only showing when typing more than 2 characters. This is basically a dropdown menu.
return (
<SearchResultComponent>
{(loadingData && currentInputLength) ?
<SearchResultBlockShow>
{getResult.map((item: SearchTerm, index: number) => (
<SearchResultBlock key={index} >
<MakeBold currentResult={item.searchterm} keyword={currentInput} />
<SearchResultSpan>{"(" + item.nrResults + ")"}</SearchResultSpan>
</SearchResultBlock>
))} </SearchResultBlockShow> : <SearchNoResult>No Result</SearchNoResult>}
</SearchResultComponent>
)
]2
import { mount, shallow } from "enzyme";
import { Provider } from "react-redux";
import { screen } from "@testing-library/dom";
import { render } from "@testing-library/react";
import '@testing-library/jest-dom';
import { store } from "../Store";
import { MakeBold } from "./matchCharacter";
it("SearchResult Component test props", () => {
const wrap = shallow(
<Provider store={store}>
<MakeBold currentResult={"trui"} keyword={"trui"} />
</Provider>
);
expect(
wrap.find({ "data-testid": "match-character-test" }).
filter((x: any) => x.props('dangerouslySetInnerHTML')).
prop('dangerouslySetInnerHTML').
__html
).toBe('<span>trui<span>');
});