Open4
t3 stack appにvitest入れてみる
![雫玉子](https://zenn-dev.github.io/default-avatars/dark/s.png)
t3 stack
vitest
![雫玉子](https://zenn-dev.github.io/default-avatars/dark/s.png)
参考
![雫玉子](https://zenn-dev.github.io/default-avatars/dark/s.png)
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()] で型警告が出るが、エラーは出ずに動く
ライブラリのバージョンが原因?
![雫玉子](https://zenn-dev.github.io/default-avatars/dark/s.png)
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 />) でエラーになる