vite+webworker+jestでハマったメモ

概要

WebWorkerをいれたところ、jestが失敗するようになってしまった。
JestはNode.js上で動くため、ブラウザ固有のAPIであるWebWorkerを使おうとして失敗する。
モック化すれば解決するはずだが、パスの読み込みにもviteは癖があり、ハマってしまった。

resolverとモックを適切に設定したところ解決したため、メモを残す。
ソースコード

発生したエラー

Configuration error: ... Could not locate module 
Please check your configuration for these entries:  

resolverの追加

参考：github issue: Jest doesn't seem to like the way workers are imported

jest.config.json

{
 "moduleNameMapper": {
   "\\.(css|less|scss)$": "identity-obj-proxy",
   "^@kartagraph-editor/(.*)$": "<rootDir>/src/$1",
   "^@kartagraph-ui/(.*)$": "<rootDir>/../packages/ui/src/$1",
   "^@kartagraph-worker/(.*)$": "<rootDir>/../packages/worker/src/$1",
   "\\.(gif|ttf|eot|svg)$": "<rootDir>/tests/jest.fileMock.js"
 },
 "setupFilesAfterEnv": [
   "./tests/jest.setup.ts"
 ],
+  "resolver": "<rootDir>/tests/jest.resolver.jsm",
}

tests/jest.resolver.jsm

module.exports = (request, options) => {
  if (request.includes('?worker')) {
    return options.defaultResolver(request.replace("?worker", ""), options)
  }

  return options.defaultResolver(request, options)
}

なお、このとき.jsmではなく.jsでresolverを書いたら下記のエラーとなった。

Error [ERR_REQUIRE_ESM]: require() of ES Module

モックの設定

Web Workerのモック化。

tests/jest.setup.ts

import '@testing-library/jest-dom';
jest.mock('@kartagraph-worker/gameCore.worker?worker', () => {
  return jest.fn().mockImplementation(() => {
    return {
      postMessage: jest.fn(),
      onmessage: null,
    };
  });
});

参考

github issue: Jest doesn't seem to like the way workers are imported
Jest - resolver
vite - web worker