How to test whether an HTML element exists

[vish01]

How can I test whether an HTML element exist after rendering a component? I'm trying to add a test case which can test whether my component is generating 2 image elements and whether they're being placed side by side.

[dermoumi]

Both jsdom and happy-dom allow you to directly access the DOM. You can do something like this:

const adjacentImage = document.querySelector("img.image1 + img.adjacent-image");
expect(adjacentImage).toBeDefined();

Alternatively, you might want to use https://testing-library.com/ for your library of choice (react, vue, etc...). It introduces a screen object that you can query from (https://testing-library.com/docs/queries/about)

[Kjir]

What I normally do with testing-library is:

import "@testing-library/jest-dom";
import { render } from "@testing-library/vue";
import MyComponent from "./MyComponent.vue";

describe("MyComponent", () => {
  it("shows the correct title", () => {
    const { getByRole } = render(MyComponent);
    expect(getByRole("heading", { name: "Hello, World!" })).toBeVisible();
  });
});