Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Interactor.js (https://interactorjs.io) vs Testing Library (https://testing-library.com)
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;
}
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);
});
// 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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment