😽

JestでSWCを使ったテストでデバッガを動かす設定

2021/11/17に公開

Webstormでテスト実行時、ts-jestではデバッガが動くのに@swc/jestに切り替えると動かない問題にぶつかったので回避方法を調査しました。

.swrcrまたはjest.config.jsで設定しているSWCの設定値に souceMaps: 'inline' を加えると動きます。ts-nodeとかts-jestとかはこの辺の設定を勝手にやってくれるので気が付きにくいのですが@swc/jestはやってくれないので自分で明示的に設定する必要があります。
https://swc.rs/docs/configuration/compilation#sourcemaps

.swcrcで設定している場合は下記のような感じになります。souceMaps以外の設定は必須ではないので適宜調整してください。

{
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "tsx": false,
            "decorators": true,
            "dynamicImport": false
        },
        "transform": {
            "legacyDecorator": true,
            "decoratorMetadata": true
        }
    },
    "module": {
        "type": "commonjs"
    },
    "sourceMaps": "inline"
}

jest.config.jsで設定している場合は下記のように設定します。

module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": [
      "@swc/jest",
      {
        jsc: {
          parser: {
            syntax: "typescript",
            decorators: true,
          },
          transform: {
            legacyDecorator: true,
            decoratorMetadata: true,
          },
        },

        module: {
          type: "commonjs",
        },

        sourceMaps: 'inline'
      },
    ],
  },
};

Webstormで動作を確認しました。

Discussion