rtl-extension.js

import React from "react";
import { render as r } from "@testing-library/react";
import App from "./App";

const capitalize = s => `${s.charAt(0).toUpperCase()}${s.slice(1)}`;

export const render = (...args) => {
  const utils = r(...args);

  const buildApiAccessor = api => ({ filter, params } = {}) => {
    const fnName = `${api}By${capitalize(filter)}`;
    const fn = utils[fnName];
    if (!fn) {
      throw new Error(`Unsupported filter: ${filter}`);
    }

    return utils[fnName](...params);
  };

  return {
    ...utils,
    get: buildApiAccessor("get"),
    query: buildApiAccessor("query"),
    find: buildApiAccessor("find")
  };
};

const ui = {
  logo: { filter: "role", params: ["img", { name: "logo" }] },
  link: { filter: "role", params: ["link", { name: /learn react/i }] },
  wrongLink: { filter: "role", params: ["link", { name: "wrong name" }] },
  emailInput: { filter: "labelText", params: ["Your email"] },
  emailLabel: { filter: "text", params: ["Your email"] }
};

test("renders learn react link", async () => {
  const utils = render(<App />);
  expect(utils.get(ui.logo)).toBeInTheDocument();
  expect(utils.get(ui.link)).toBeInTheDocument();
  expect(utils.query(ui.link)).toBeInTheDocument();
  expect(utils.query(ui.wrongLink)).not.toBeInTheDocument();

  await utils.find(ui.logo);
  await utils.find(ui.link);

  const emailInput = utils.get(ui.emailInput);
  expect(emailInput).toHaveValue("[email protected]");
  expect(emailInput.tagName).toEqual("INPUT");

  const emailLabel = utils.get(ui.emailLabel);
  expect(emailLabel.tagName).toEqual("LABEL");
});