• avoid including implementation details
• work with DOM nodes
• resemble software usage
• maintainability

JEST

• JS test runner
• uses jsdom - artificial DOM
• global test function - injects in all test files
• expect function - takes result of query and appends matter
• mock function - allows you to track how a function is called by external code

React Testing Library

• set of utilities - test react components without relying on implementation
• designed to fulfill best practices
• render - render component to be tested and perform assertions against
• screen - reference to entire document body
• fire an onChange event on an input
  • fireEvent.change(input, { target: { value: ”” } })
• fire a click event on a button
  • fireEvent.click(button)
• screen querying methods from react-testing-library, ex. screen.getByRole or screen.getByLabelText
  • if the element is not found → throw an error

App.test.js

import {render, screen} from "@testing-library/react";
import App from "./App";

test("renders a link that points to webpage", () => {
	render(<App/>);
	const linkElement = screen.getByText("Little Lemon Restaurant"); // fails bc app says "Little Orange Restaurant"
	expect(linkElement).toBeInTheDocument();
});

form testing example