Interactor.js (https://interactorjs.io) vs Testing Library (https://testing-library.com)

get-example-dom.js

export default function getExampleDOM() {
  // This is just a raw example of setting up some DOM
  // that we can interact with. Swap this with your UI
  // framework of choice 😉
  let div = document.createElement("div");

  div.innerHTML = `
    <label for="username">Username</label>
    <input id="username" />
    <button>Print Username</button>
  `;

  let button = div.querySelector("button");
  let input = div.querySelector("input");

  button.addEventListener("click", () => {
    // let's pretend this is making a server request, so it's async
    // (you'd want to mock this imaginary request in your unit tests)...
    setTimeout(() => {
      let printedUsernameContainer = document.createElement("div");

      printedUsernameContainer.innerHTML = `
        <div data-testid="printed-username">${input.value}</div>
      `;

      div.appendChild(printedUsernameContainer);
    }, Math.floor(Math.random() * 200));
  });

  // actaully mount this into the DOM
  document.body.append(div);

  // return it for the testing lib example too,
  // interactor doesn't need this.
  return div;
}

interactor.js

import { scoped, click, type } from "interactor.js";
import getExampleDOM from "./get-example-dom";

test("examples of some things", async () => {
  let famousWomanInHistory = "Ada Lovelace";
  // Mount the example DOM into the document
  getExampleDOM();

  // type in the input like a user, rather than setting it manually
  await type("input", famousWomanInHistory);
  // will assert it's not disabled & send a native click event
  await click("button");
  // Make the assertions
  await scoped('[data-testid="printed-username"]')
    // not needed since the next assert does both,
    // but for a more complete comparison I'll leave it
    .assert.exists()
    .assert.text(famousWomanInHistory);
});

testing-library.js

// src/__tests__/example.js
// query utilities:
import {
  getByLabelText,
  getByText,
  getByTestId,
  queryByTestId,
  // Tip: all queries are also exposed on an object
  // called "queries" which you could import here as well
  wait
} from "@testing-library/dom";
// adds special assertions like toHaveTextContent
import "jest-dom/extend-expect";
import getExampleDOM from "./get-example-dom";

test("examples of some things", async () => {
  const famousWomanInHistory = "Ada Lovelace";
  const container = getExampleDOM();

  // Get form elements by their label text.
  // An error will be thrown if one cannot be found (accessibility FTW!)
  const input = getByLabelText(container, "Username");
  input.value = famousWomanInHistory;

  // Get elements by their text, just like a real user does.
  getByText(container, "Print Username").click();

  await wait(() =>
    expect(queryByTestId(container, "printed-username")).toBeTruthy()
  );

  // getByTestId and queryByTestId are an escape hatch to get elements
  // by a test id (could also attempt to get this element by it's text)
  expect(getByTestId(container, "printed-username")).toHaveTextContent(
    famousWomanInHistory
  );
  // jest snapshots work great with regular DOM nodes!
  expect(container).toMatchSnapshot();
});