TypeScriptとJestとCircleCIとCodecovな環境

## TypeScript

まずは、本体をインストール。

```bash
npm i -D typescript
# yarn add -D typescript
```

`tsconfig.json`の作成。

```bash
npx tsc --init
# yarn run tsc --init
```

適当に変換するファイル作成。

```ts:index.ts
export function plus(x: number, y: number): number {
  return x + y;
}
```

以下で変換できればok。

```
npx tsc index.ts
# yarn tsc index.ts
```

`push`時に、色々含まれないようにする。

```bash
 cat > .gitignore <<A
> node_modules/
> index.js
> coverage/
> A
```

## Jest

インストール。

```bash
npm i -D jest ts-jest @types/jest
# yarn add -D jest ts-jest @types/jest
```

通るテストを書く。

```ts:index.test.ts
import {plus} from './index.ts';

test('plus', () => {
  expect(plus(1, 1)).toBe(2);
});
```

`package.json`にこんな感じの`jest`プロパティを追加。

```json
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json",
      "jsx"
    ]
  },
```

また、`run-scripts`の`test`で使えるようにする。`package.json`にこんなのを追記。

```json
  "scripts": {
    "test": "jest index.test.ts"
  }
```

テスト。

```bash
npm test
# yarn test
#
# ----------------------
#  PASS  ./index.test.ts
#   ✓ plus (3ms)
#     ...
```


## CircleCI

設定ファイルを作る。

```bash
mkdir .circleci && touch .circleci/config.yml
```

中身はこんな感じ。（Nodeのサンプルの`yarn`を`npm`に変えただけ）

```yaml:.circleci/config.yml
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:7.10
    working_directory: ~/repo
    steps:
      - checkout
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package.json" }}
          - v1-dependencies-
      - run: npm install
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
      - run: npm test
```

Githubへプッシュ。

```
git init
git add --all
git commit -m 'Init'
git remote add origin git@github.com:...
git push origin master
```

CircleCIの設定。「Add Project]のからの、

![Projects_-_CircleCI_🔊.png](https://qiita-image-store.s3.amazonaws.com/0/84144/edff2c3e-f6b3-aece-dfcc-854b6d85f8b8.png)

適当なリポジトリをセットアップを押して、

![Add_Projects_-_CircleCI_🔊.png](https://qiita-image-store.s3.amazonaws.com/0/84144/8dc7120a-2147-ad69-0d3c-1c382b19e73a.png)

![Add_Projects_-_CircleCI_🔊 3.png](https://qiita-image-store.s3.amazonaws.com/0/84144/6c429e36-c621-bf34-a8f8-82d733146775.png)

「Start Building」をクリック。

![Add_Projects_-_CircleCI_🔊 2.png](https://qiita-image-store.s3.amazonaws.com/0/84144/42a0c89c-021f-e508-d972-9b94f864bf0a.png)

通った。

![CircleCI_🔊.png](https://qiita-image-store.s3.amazonaws.com/0/84144/bfe2d137-d103-26a7-585a-4f72f3123fbb.png)

## Codecov

まずはインストール。

```bash
npm i -D codecov
# yarn add -D codecov
```

`package.json`の`jest`プロパティを編集して、`coverage/`に結果を出すようにする。こんな感じ。

```json
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json",
      "jsx"
    ],
    "coverageDirectory": "./coverage/",
    "collectCoverage": true
  },
```

あと`scripts`の`test`で`codecov`コマンドを続けて実行するように。

```json
  "scripts": {
    "test": "jest index.test.ts && codecov"
  }
```

`codecov`コマンドでデータを送るのにトークンが必要なので、その辺の設定をする。

Codecovの対象リポジトリのページを開く。この辺から、

![Team_⋅_nju33_🔊.png](https://qiita-image-store.s3.amazonaws.com/0/84144/0cd1d60c-fe19-efa1-4e45-4ead0be2fab4.png)

開くとトークンがあるので、コピー。

![Dashboard_⋅_nju33_example-typescript-jest-circleci-codecov_🔊.png](https://qiita-image-store.s3.amazonaws.com/0/84144/31ac5d58-ec53-a1a1-c7b9-00498fdc79c6.png)

CI上で`CODECOV_TOKEN`という名前で見れるように、環境変数を登録する。

![CircleCI_🔊.png](https://qiita-image-store.s3.amazonaws.com/0/84144/4cfa311b-33f6-07e5-954b-e05f8f109810.png)

「Add Variable」から。

![Project_settings_-_nju33_example-typescript-jest-circleci-codecov_-_CircleCI_🔊.png](https://qiita-image-store.s3.amazonaws.com/0/84144/e1f79162-fead-de36-8934-c3d911ee7763.png)

（モザイクはトークン）

![Project_settings_-_nju33_example-typescript-jest-circleci-codecov_-_CircleCI_🔊.png](https://qiita-image-store.s3.amazonaws.com/0/84144/f0809ff8-e8e4-e053-eef8-ade2b46772cc.png)

先程の修正をプッシュして、無事CIが通ったらCodecovのページが更新。
こんな感じになってたらok!!

![codecov_io-gh-nju33-example-typescript-jest-circleci-codecov.png](https://qiita-image-store.s3.amazonaws.com/0/84144/af77dea8-a83d-f7f0-198c-98b2d68b1d43.png)

## おわりに

実際の`npm test`の中では`[ "true" = "$CI" ] && ... || ...`とか使ってローカルでは`codecov`しないとかすると良いと思います。

## リポジトリ

[nju33/example-typescript-jest-circleci-codecov](https://github.com/nju33/example-typescript-jest-circleci-codecov)