Zenn
Closed2

RemixとVitest

Remix
Vitest
TatchNicolasTatchNicolas

Remixで素振りしてて、テストの置き方が気になった。

go書いてると、ディレクトリはどうあれ

your_code.go
your_code_test.go

ruby書いてると

./app/your_code.rb
./spec/your_code_spec.rb

みたいに配置するのがほとんどだと思う。

一方でvitestのDocには

By default, tests must contain ".test." or ".spec." in their file name.
https://vitest.dev/guide/#writing-tests

で、 your_code.test.tsx みたいになる。

それを踏まえてgoみたいに一緒に置いておこうとすうると

app/routes/your_code.tsx
app/routes/your_code.test.tsx

となり、テストとして置いたファイルが /your_code/test みたいなrouteと認識されてしまう。

もちろんtestとして書いたファイルはrouteとしては不正(componentをdefault exportしてないし)なのでおこられる。そこで、

This is an array of globs (via minimatch) that Remix will match to files while reading your app/routes directory. If a file matches, it will be ignored rather than treated like a route module. This is useful for ignoring CSS/test files you wish to colocate.
https://remix.run/docs/en/main/file-conventions/vite-config#ignoredroutefiles

このオプションを使えばテストコードをテスト対象の隣に置いてもOK

export default defineConfig({
  plugins: [
    // https://remix.run/docs/en/main/guides/vite#plugin-usage-with-other-vite-based-tools-eg-vitest-storybook
    !process.env.VITEST &&
      remix({
        ignoredRouteFiles: ["routes/*.test.tsx"], // これ
      }),
    tsconfigPaths(),
  ],
});
このスクラップは1ヶ月前にクローズされました