【VSCode】tsconfig.jsonを環境ごとに準備して、テストのファイルで`Cannot find module...`エラーを出さない方法

VSCodeで発生していたお悩み

普段開発を行なっているプロジェクトでは、デフォルトのtsconfig.jsonにて、__tests__ディレクトリのファイルをコンパイルの対象外に設定しています。

{
    ...
    "include": [
        "src",
    ],
    "exclude": [
        "src/**/*.test.ts",
        "__tests__",
        "__mocks__"
    ]
}

そのため、__tests__ディレクトリのテストファイルをVSCodeで開くと、次のような赤線がエディター条に表示されてしまいます。

VSCode用のtsconfig.jsonに修正する

そこで、VSCodeには、テストファイルを開いた時にもCannot find module...エラーを表示させないようにするためにexcludeから__tests__を削除するようにします。そして、includeに、__tests__を追加します。

{
    "include": [
        "src",
        "__tests__"
    ],
    "exclude": []
}

この結果、テストファイルを開いた状態のVSCodeのエディター画面からエラーの表示が消えました。

しかし、まだ問題は残っています。

ビルド用のtsconfig.jsonを作成する

今まで、ビルドもテストもデフォルトのtsconfig.jsonを使って行なってきたため、package.jsonのビルド用のスクリプトは次のようになっています。

{
    "name": "functions",
    "scripts": {
        ...
        "build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
        ...
    }
    ...
}

そこで、デフォルトのtsconfig.jsonを拡張して、ビルド用に設定を上書きしたtsconfig.build.jsonを作成します。

{
    "extends": "./tsconfig.json",
    "include": [
        "src",
    ],
    "exclude": [
        "src/**/*.test.ts",
        "__tests__",
        "__mocks__"
    ]
}

そして、先ほどのbuildスクリプトの内容を修正して、tsconfig.build.jsonを使うように書き換えます。

{
    "name": "functions",
    "scripts": {
        ...
        "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
        ...
    }
    ...
}

テスト用のtsconfig.jsonを作成する

ここまできたら、ついでにテスト時にts-jestで使用されるtsconfig.test.jsonも作成することにします。

{
    "extends": "./tsconfig.json",
    "include": [
        "src",
    ],
    "exclude": []
}

jest.config.jsを修正して、ts-jestの設定としてtsconfig.test.jsonを使用するようにします。

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'node',
    roots: ['<rootDir>/__tests__', '<rootDir>/src'],
    setupFilesAfterEnv: ['<rootDir>/__mocks__/globalMock.js'],
    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    testPathIgnorePatterns: ['<rootDir>/../../node_modules/', '<rootDir>/node_modules/'],
    transform: {
        '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/../..//node_modules/ts-jest',
    },
    moduleNameMapper: {
    "^~/(.+)$": "<rootDir>/src/$1",
    "^test/(.+)$": "<rootDir>/test/$1",
    },
    globals: {
        'ts-jest': {
            tsconfig: './tsconfig.test.json',
        },
    },
};

まとめ

これで、すべての設定が完了しました。VSCodeのエディタ画面から煩わしさが減り、tsconfig.jsonを環境ごとに分割したことで、管理のしやすさも副次的に向上したと思います。

年の瀬ということで、年末の大掃除もかねて、既存のプロジェクトに存在するtsconfig.jsonの整理を行ってみることをおススメします！意外と簡単ですよ！

参考にした記事