I'm trying to make a DropDown Test with react-testing-library. The idea is to pass a ClassName prop that will concatenate the "DropDown" + ClassName which can be any string.

I already know that this syntax works:

it("className random string DropDown renders fine", () => {
  const RenderResult = render(
  <DropDown
    id="story1"
    value={undefined}
    label="label1"
    options={options}
    className="Extra"
  />
);
console.log(RenderResult.container.innerHTML);
expect(RenderResult.getByText("label1")).toBeInTheDocument();

});

The console.log(RenderResult.container.innerHTML) is:

<div class="ClickDropDown Extra" id="story1-wrapper"><label 
for="story1-button" class="label">label1</label><button 
id="story1-button" class="" aria-label="

...and etc the print goes on

it("className random string DropDown renders fine", () => {
    const RenderResult = render(
    <DropDown
    id="story1"
    value={undefined}
    label="label1"
    options={options}
    className="Extra"
    />
    );
    expect(
    RenderResult.querySelector("DropDown Extra")
    ).toBeInTheDocument();
 });

I have also tried with "getElementsByClassName" in the "querySelector" place but also doesn't work.

The idea is to assert what we expect that the first div of the DropDown will have a class="DropDown Extra".

0 Answers