Typescript × Jest × Docker の実行環境をさくっと構築!

お久しぶりです!新垣です!

最近 Typescript の勉強を始めたので簡単に実行できる環境ほしかったのと

Jestも実行できるようにしたかったので Dockerで実行環境を作ってみたので共有します!

以下記事を参考にさせていただきました。

Node(typescript) + docker 環境構築メモ

https://zenn.dev/gakin/scraps/4cc16e7761d1ef

JestをTypeScriptで使う

https://zenn.dev/kohski/articles/typescript_jest

1.Dockerfile & docker-compose.yaml の追加

以下コマンドでファイルの追加とdockerの設定の追加

touch Dockerfile docker-compose.yaml

Dockerfile

FROM node:12

WORKDIR /app

RUN npm install && \
    npm init -y && \
    yarn add --dev typescript ts-node ts-node-dev jest ts-jest @types/jest && \
    mkdir src tests && touch src/app.ts tests/index.test.ts && \
    cd /usr/local/bin &&\
    ln -s /app/node_modules/typescript/bin/tsc && \
    tsc --init

docker-compose.yaml

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/app

2. 実行ファイルを作成

$ mkdir src tests && touch src/index.ts tests/index.test.ts

src/index.ts

const message = 'hello world!'

console.log(message)
export default message

tests/index.test.ts

import message from '../src'

test('check message value', () => {
    expect(message).toBe('hello world!')
})

3. 設定ファイルの追加と修正

$ touch package.json

package.json

{
    "name": "app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
        "ts-node": "^10.8.1",
        "typescript": "^4.7.4",
        "tsc": "2.0.4"
    },
    "devDependencies": {
        "@types/jest": "^28.1.3",
        "jest": "^28.1.1",
        "ts-jest": "^28.0.5"
    },
    "scripts": {
        "test": "jest --coverage"
    },
    "author": "",
    "license": "ISC"
}

4. Dockerの起動

$ docker-compose build
$ docker-compose up -d

5. jest の設定

jest.config.js

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ["<rootDir>/tests", "<rootDir>/src"],
  collectCoverage: true,
  collectCoverageFrom: [
    "*/*.ts",
    "!**/node_modules/**",
  ],
  coverageDirectory: 'coverage_dir',
  coverageReporters: ["html"]
};

5. ファイルのコンパイルと実行

tsファイルのコンパイル

$ docker-compose exec app tsc src/index.ts

js ファイルの実行

$ docker-compose exec app node src/index.js

jest 実行

$ docker-compose exec app npm test

皆さんがさくっと環境構築できて Typescript の学習に集中できると私もうれしいです!

みんなでTypescriptマスターを目指しましょう!

コメント