@bigtest/interactor with Jest to test React components

checkbox.test.js

import React from "react";
import { mount } from "@bigtest/react";
import {
  interactor,
  attribute,
  property,
  clickable,
  focusable,
  blurrable,
  is
} from "@bigtest/interactor";
import Checkbox from "..";

const CheckboxInteractor = interactor(
  class CheckboxInteractor {
    tabIndex = attribute("input", "tabindex");
    isChecked = property("input", "checked");
    isDisabled = property("input", "disabled");
    hasFocus = is("input", ":focus");
    focusCheckbox = focusable("input");
    blurCheckbox = blurrable("input");

    toggleCheckbox = clickable("input");
  }
);

describe("Checkbox", () => {
  const checkbox = new CheckboxInteractor("label");

  it("has the right tabindex", async () => {
    await mount(() => <Checkbox tabIndex="2" />);

    expect(checkbox.tabIndex).toBe("2");
  });

  it("toggles the checkbox via label click", async () => {
    await mount(() => <Checkbox />);

    expect(checkbox.isChecked).toBe(false);

    await checkbox.click();

    expect(checkbox.isChecked).toBe(true);
  });

  it("toggles the checkbox when a default value is passed", async () => {
    await mount(() => <Checkbox defaultChecked />);

    expect(checkbox.isChecked).toBe(true);

    await checkbox.toggleCheckbox();

    expect(checkbox.isChecked).toBe(false);
  });

  it("is disabled with prop", async () => {
    await mount(() => <Checkbox disabled />);

    expect(checkbox.isDisabled).toBe(true);
  });

  it("is not disabled by default", async () => {
    await mount(() => <Checkbox />);

    expect(checkbox.isDisabled).toBe(false);
  });

  it("calls onFocus() when focus is set", async () => {
    const handleFocus = jest.fn();

    await mount(() => <Checkbox onFocus={handleFocus} />);
    await checkbox.focusCheckbox();

    expect(handleFocus).toBeCalled();
    expect(checkbox.hasFocus).toBe(true);
  });

  it("calls onBlur() when blur is set", async () => {
    const handleBlur = jest.fn();

    await mount(() => <Checkbox onBlur={handleBlur} />);
    await checkbox.focusCheckbox().blurCheckbox();

    expect(handleBlur).toBeCalled();
    expect(checkbox.hasFocus).toBe(false);
  });

  it("with autoFocus onFocus() is called", async () => {
    const handleFocus = jest.fn();
    await mount(() => <Checkbox autoFocus onFocus={handleFocus} />);

    expect(handleFocus).toBeCalled();
    expect(checkbox.hasFocus).toBe(true);
  });
});