Bun 付属の Jest 互換テストランナーを使ってみる

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

import renderer from "react-test-renderer";
import { test, expect } from "bun:test";
import App from "./App";

test("render a component", () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

✓ render a component [9.74ms]

 1 pass
 0 fail
 snapshots: +1 added
 1 expect() calls
Ran 1 tests across 1 files.

import { render, screen } from "@testing-library/react";
import { expect, it, describe } from "bun:test";
import App from "./App";

describe("render a component", () => {
  render(<App />);

  it("exists img element has className='App-logo' and alt='logo'", () => {
    const logoElement = screen.getByRole("img", { name: /logo/i });
    expect(logoElement).not.toBeNull();
    expect(logoElement.className).toBe("App-logo");
    expect(logoElement.alt).toBe("logo");
  });

  it("exists link element has href='https://reactjs.org/'", () => {
    const linkElement = screen.getByRole("link", { name: /learn react/i });
    expect(linkElement).not.toBeNull();
    expect(linkElement.href).toBe("https://reactjs.org/");
  });

  it("if exists link element has target='_blank' then it has rel='noopener noreferrer'", () => {
    const blankLinkElement = screen.getByRole("link", { target: "_blank" });
    expect(blankLinkElement).not.toBeNull();
    expect(blankLinkElement.rel).toBe("noopener noreferrer");
  });
});

✓ render a component > exists img element has className='App-logo' and alt='logo' [13.53ms]
✓ render a component > exists link element has href='https://reactjs.org/' [1.56ms]
✓ render a component > if exists link element has target='_blank' then it has rel='noopener noreferrer' [0.36ms]

 3 pass
 0 fail
 7 expect() calls
Ran 3 tests across 1 files. [436.00ms]

 PASS  src/App.test.js
  render a component
    ✓ exists img element has className='App-logo' and alt='logo' (80 ms)
    ✓ exists link element has href='https://reactjs.org/' (32 ms)
    ✓ if exists link element has target='_blank' then it has rel='noopener noreferrer' (10 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.155 s
Ran all test suites related to changed files.