t3 stack appにvitest入れてみる

雫玉子 2022/12/10

t3 stack
https://github.com/t3-oss/create-t3-app

vitest
https://vitest.dev/guide/

雫玉子 2022/12/10

参考

雫玉子 2022/12/10

vitest.config.ts

import { fileURLToPath } from "url";
import { configDefaults, defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "happy-dom",
    exclude: [...configDefaults.exclude],
    alias: {
      "~/": fileURLToPath(new URL("./src/", import.meta.url)),
    },
  },
});

plugins: [react()] で型警告が出るが、エラーは出ずに動く
ライブラリのバージョンが原因？

雫玉子 2022/12/10

t3 stack appのpages/index.tsxに対してテスト書く
trpc部分の記述は削除

index.test.tsx

import { test, expect } from "vitest";
import { render, screen, within } from "@testing-library/react";
import Home from "../../src/pages/index";

test("titleが表示されていること", () => {
  render(<Home />);
  const main = within(screen.getByRole("main"));
  expect(
    main.getByRole("heading", { level: 1, name: /Create T3 App/ })
  ).toBeDefined();
});

next/link のchildrenは1つのelementであることが必要なので、Fragmentで囲むようにする
囲まないと render(<Home />) でエラーになる