TypeScript Deep Dive 日本語版
  • TypeScript Deep Dive 日本語版
  • TypeScript入門 & 環境構築
    • なぜTypeScriptを使うのか?
  • JavaScript
    • 等価演算子の同一性
    • リファレンス
    • nullとundefined
    • this
    • クロージャ
    • Number型
    • Truthy
  • モダンなJavaScriptの機能
    • クラス
      • Classes Emit
    • アロー関数
    • 残余引数(Restパラメータ)
    • let
    • const
    • 分割代入
    • スプレッド演算子
    • for...of
    • Iterator
    • テンプレートリテラル
    • Promise
    • ジェネレータ
    • async await
  • プロジェクトの環境設定
    • コンパイルコンテキスト
      • tsconfig.json
      • コンパイル対象ファイルの設定
    • 宣言空間
    • ファイルモジュール
      • ファイルモジュールの詳細
      • global.d.ts
    • 名前空間
    • 動的インポート
  • Node.js & TypeScriptのプロジェクト作成
  • React & TypeScriptのプロジェクト作成
  • TypeScriptの型システム
    • JavaScriptからの移行ガイド
    • @types パッケージ (DefinitelyTyped)
    • アンビエント宣言(declare)
      • 型定義ファイル
      • グローバル変数の宣言
    • インターフェース
    • Enum
    • lib.d.ts
    • 関数の型
    • 呼び出し可能オブジェクト
    • Type Assertion(型アサーション)
    • Freshness
    • 型ガード
    • リテラル型
    • Readonly
    • ジェネリック型
    • 型推論
    • 型の互換性
    • never
    • 判別可能なUnion型
    • Index signature(インデックス型)
    • 型の移動
    • 例外のハンドリング
    • ミックスイン
  • JSX
    • React
    • React以外のJSX
  • オプション
    • noImplicitAny
    • strictNullChecks
  • TypeScriptのエラー
    • エラーの理解
    • 一般的なエラー
  • NPM
  • テスト
    • Jest
    • Cypress
  • ツール
    • Prettier
    • Husky
    • Changelog
  • その他のヒント
    • String Based Enums
    • Nominal Typing
    • Stateful Functions
    • Bind is Bad
    • Currying
    • Type Instantiation
    • Lazy Object Literal Initialization
    • Classes are Useful
    • Avoid Export Default
    • Limit Property Setters
    • outFile caution
    • JQuery tips
    • static constructors
    • singleton pattern
    • Function parameters
    • Build Toggles
    • Barrel
    • Create Arrays
    • Typesafe Event Emitter
  • スタイルガイド(コーディング規約)
  • TypeScriptコンパイラの内側
    • Program
    • AST
      • TIP: Visit Children
      • TIP: SyntaxKind enum
      • Trivia
    • Scanner
    • Parser
      • Parser Functions
    • Binder
      • Binder Functions
      • Binder Declarations
      • Binder Container
      • Binder SymbolTable
      • Binder Error Reporting
    • Checker
      • Checker Diagnostics
      • Checker Error Reporting
    • Emitter
      • Emitter Functions
      • Emitter SourceMaps
    • Contributing
GitBook提供
このページ内
  • ステップ1:インストール
  • ステップ2:Jestを設定する
  • 手順3:テストを実行する
  • オプション:npmスクリプトのスクリプトターゲットを追加する
  • オプション:watchモードでjestを実行する
  • 例
  • Example async
  • enzymeの例
  • 私たちがjestを好きな理由

役に立ちましたか?

  1. テスト

Jest

前へテスト次へCypress

最終更新 2 年前

役に立ちましたか?

パーフェクトなテストのソリューションはありません。とはいえ、jestは優れたTypeScriptサポートを提供する素晴らしいユニットテストのオプションです。

注意:単純なノードのpackage.json setupで始めることを前提としています。また、すべてのTypeScriptファイルはsrcフォルダに置かれていなければなりません。このフォルダは、きれいなプロジェクト設定のために(Jestを使わなくても)常に推奨されます。

ステップ1:インストール

npmを使用して次をインストールします。

npm i jest @types/jest ts-jest -D

説明:

  • jestフレームワーク(jest)をインストールします

  • jestの型(@types/jest)をインストールします

  • Jest用のTypeScriptプリプロセッサ(ts-jest)をインストールします。これにより、Jestはその場でTypeScriptをトランスパイルすることができ、source-mapをサポートします

  • これらのすべてを、あなたのdevの依存関係に保存してください(テストはほとんど常にnpmのdev-dependencyです)

ステップ2:Jestを設定する

次のjest.config.jsファイルをプロジェクトのルートに追加します:

module.exports = {
  "roots": [
    "<rootDir>/src"
  ],
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
}

説明:

  • 私達は_すべての_TypeScriptファイルをプロジェクトのsrcフォルダに入れることを常にお勧めします。また、これに倣いroots設定ではsrcフォルダを指定します。

  • testMatch設定は、ts/tsx/jsフォーマットで書かれた.test/.specファイルを発見するためのglobのパターンマッチャーです。

  • transform設定は、ts/tsxファイルに対してts-jestを使うようjestに指示します。

手順3:テストを実行する

あなたのプロジェクトのルートからnpx jestを実行すると、jestはあなたのテストを実行します。

オプション:npmスクリプトのスクリプトターゲットを追加する

package.jsonに追加してください:

{
  "test": "jest"
}
  • これにより、簡単なnpm tでテストを実行できます。

  • また、npm t --watchのwatchモードでも。

オプション:watchモードでjestを実行する

  • npx jest --watch

例

  • foo.tsファイルの場合:

export const sum
  = (...a: number[]) =>
    a.reduce((acc, val) => acc + val, 0);
  • 単純なfoo.test.ts:

import { sum } from '../foo';

test('basic', () => {
  expect(sum()).toBe(0);
});

test('basic again', () => {
  expect(sum(1, 2)).toBe(3);
});

ノート:

  • Jestは、グローバルなtest関数を提供します。

  • Jestには、グローバルなexpectの形でアサーションがあらかじめ組み込まれています。

Example async

Jestには、async/awaitサポートが組み込まれています。例えば:

test('basic', async () => {
  expect(sum()).toBe(0);
});

test('basic again', async () => {
  expect(sum(1, 2)).toBe(3);
}, 1000 /* optional timeout */);

enzymeの例

enzymeのDOMサポートは、Reactコンポーネントをテストすることができます。enzymeを設定するには3つのステップがあります:

  1. enzyme、enzymeの型、より良いenzymeのスナップショットシリアライザ、あなたのreactバージョンのためのenzyme-adapter-reactをインストールします。npm i enzyme @types/enzyme enzyme-to-json enzyme-adapter-react-16 -D

  2. "snapshotSerializers"と"setupTestFrameworkScriptFile"をjest.config.jsに追加します:

module.exports = {
  // OTHER PORTIONS AS MENTIONED BEFORE

  // Setup Enzyme
  "snapshotSerializers": ["enzyme-to-json/serializer"],
  "setupFilesAfterEnv": ["<rootDir>/src/setupEnzyme.ts"],
}
  1. src/setupEnzyme.tsファイルを作成します。

import { configure } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
configure({ adapter: new EnzymeAdapter() });

次に、reactコンポーネントとテストの例を示します:

  • checkboxWithLabel.tsx:

import * as React from 'react';

export class CheckboxWithLabel extends React.Component<{
  labelOn: string,
  labelOff: string
}, {
    isChecked: boolean
  }> {
  constructor(props) {
    super(props);
    this.state = { isChecked: false };
  }

  onChange = () => {
    this.setState({ isChecked: !this.state.isChecked });
  }

  render() {
    return (
      <label>
        <input
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.onChange}
        />
        {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
      </label>
    );
  }
}
  • checkboxWithLabel.test.tsx:

import * as React from 'react';
import { shallow } from 'enzyme';
import { CheckboxWithLabel } from './checkboxWithLabel';

test('CheckboxWithLabel changes the text after click', () => {
  const checkbox = shallow(<CheckboxWithLabel labelOn="On" labelOff="Off" />);

  // Interaction demo
  expect(checkbox.text()).toEqual('Off');
  checkbox.find('input').simulate('change');
  expect(checkbox.text()).toEqual('On');

  // Snapshot demo
  expect(checkbox).toMatchSnapshot();
});

私たちがjestを好きな理由

  • ビルトインのアサーションライブラリ

  • 優れたTypeScriptサポート

  • 非常に信頼できるテストwatcher

  • スナップショットテスト

  • ビルトインのカバレッジレポート

  • ビルトインのasync/awaitサポート

Jest/TypeScriptに関するPro eggheadレッスン
enzyme/Jest/TypeScriptのPro eggheadレッスン
これらの機能の詳細についてはjest websiteを参照してください