Closed13

Cloudflare Workers+Remixでのサーバー側ユニットテスト

smallStallsmallStall

上記リポジトリのsrcの部分をappに変えてやればとりあえず動いた。

jest.config.js
module.exports = {
  testEnvironment: "miniflare", // ✨
  // Tell Jest to look for tests in .mjs files too
  testMatch: [
    "**/?(*.)+(test).?(m)[tj]s?(x)",
  ],
  preset: "ts-jest/presets/default-esm",
  globals: {
    "ts-jest": {
      tsconfig: "test/tsconfig.json",
      useESM: true,
    },
  },
  moduleNameMapper: {
    "^~/(.+)$": "<rootDir>/app/$1"
  },
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
};
test/tsconfig.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["@cloudflare/workers-types", "jest"]
  },
  "include": ["../app/**/*", "**/*"]
}
package.json
  "module": "./dist/session.server.mjs",
  "type": "module",
  "scripts": {
...
    "test": "npm run build && node --experimental-vm-modules node_modules/jest/bin/jest.js"
...
  }
smallStallsmallStall

今度はremixのbuildが通らない。
サブフォルダにpackage.jsonをコピーしてそこで「"type": "module"」を指定すればどうだろう。

smallStallsmallStall

下のような構成でremixのbuildと両立できた。

package.json
    "test": "npm test --prefix test"
test/package.json
{
  "name": "test",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "node --experimental-vm-modules ../node_modules/jest/bin/jest.js"
  }
}

ルートのpackage.jsonのnpm scriptsにて、--prefix test指定してtestフォルダのnpm scriptsを呼び出している。
注意点として、wrangler.tomlをtestフォルダ下にも置かないとbindingsが使えない。
また、jestのconfigもrootDirを変更した。

jest.config.js
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(path.dirname(__filename));

export default {
...
  rootDir: __dirname,
...
};
smallStallsmallStall

actionやloaderのテストは実行時間が長くなりそうなので、とりあえずもっと細かい単位のテストからやることにした。

smallStallsmallStall

こんな感じにしたらSyntaxErrorはなくなった(Windows環境)。

testのpackage.json
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
    "@babel/preset-env": "^7.18.0",
    "babel-jest": "^28.1.0",
    "cross-env": "^7.0.3",
    "jest": "^28.1.0",
    "ts-jest": "^28.0.2"
  },
ルートのbabel.config.js
module.exports = {
  plugins: ["@babel/plugin-transform-modules-commonjs"]
};
testフォルダのjest.config.js
  transform: {
    ".*\\.js$": "babel-jest"
  },
  transformIgnorePatterns: [
    "node_modules/?!(validator/es)",
  ],

babelのせいか実行速度が遅いのが気になる。

smallStallsmallStall

swc-jestを使うことで実行時間が半分くらいになった。

npm i -D jest @swc/core @swc/jest --prefix test
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(path.dirname(__filename));

export default {
  testEnvironment: "miniflare", // ✨
  rootDir: __dirname,
  testMatch: [
    "**/?(*.)+(spec).?(m)[tj]s?(x)",
  ],
  transform: {
    ".*\\.(t|j)sx?$": "@swc/jest",
  },
  transformIgnorePatterns: [
    "node_modules/?!(validator/es)",
  ],
  moduleNameMapper: {
    "^~/(.+)$": "<rootDir>/app/$1",
  },
};
このスクラップは2022/07/24にクローズされました