Jestですべてをテストします.

この投稿は、JavaScriptアプリケーションの任意の種類のためのセットアップをすばやくセットアップする方法についてのガイドです😄

目次:

ノードの設定方法.

ES 6のセットアップ方法.

タイプスクリプトの設定方法.

ユニットテストの基礎

DOM相互作用をテストする

スナップショットを使ったテスト.まず第一に、なぜ、あなたはいつテストを書き始めるべきですか?
一部の人々はテストの主唱者です、そして、彼らはあなたがすべて、そして、いろいろなテスト(単位、統合、承認など)のためにテストを書くべきであるとあなたに話しますそして、何人かの人々は、テストのように、それが資源の無駄で、管理するのが難しいと言います、そして、状況の多くで、コードがとにかくそうするべきであるのを確実にしないでください.
私は真実が真ん中にあり、あなたが何をしているかを止めて、あなたが何を書くべきであるか、そして、どのように多くの人が誰のためにでも働く良い答えがないかを決めるテストを決めるべきであると考えなければなりません.

ノードの設定方法.
例レポ:Jest Node
これは最も簡単なものです

npm i --save-dev jest

テストスクリプトをパッケージに追加します.JSONまたはそれが既にそこにあるならば、それを変えてください.
インパッケージ.JSON

...
"main": "calc.js",
  "scripts": {
    "test": "jest --watch"
  },
  "keywords": [],
...

プロジェクトのルートにテストフォルダーを作成します.テストの場所を指定します.テストするファイルの名前に一致するテストを命名します.Calc . testというテストファイルを作成します.JST、デフォルトでjestは“test .”を持つ任意のファイルを検索しますその中でテストを実行します.
それで😄
ノードアプリケーションをテストする場合は、「テストファンダメンタルズ」にジャンプすることができます.

ES 6のセットアップ方法
例レポ:Jest Node
ノードの設定とよく似ています.
インストール

npm i --save-dev jest

テストスクリプトをパッケージに追加します.それがすでにそこにあるならば、JSONまたはそれを変えてください.
インパッケージ.JSON

...
"main": "calc.js",
  "scripts": {
    "test": "jest --watch"
  },
  "keywords": [],

//をテスト//をテストします.テスト.拡張としてのJS、何かが間違っているならば、Exemplo repo
また、テストをコンパイルするにはBabelを設定する必要があります.
あなたが使用しているBabelのどのバージョンに応じて、“/babel . config . json”または"./. babelrc "を設定します.

..
"env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
...

プラグインのインストール

npm i --save-dev "@babel/plugin-transform-modules-commonjs"

もう一度トラブルがある場合は、例のレポを見てください.
それで😄
ES 6を使用してアプリケーションをテストする場合は、「テストの基礎」にジャンプすることができます.

タイプスクリプトの設定方法.
ES 6セットアップに非常に似ています.
Jest、Jestタイプ定義、Babel、Babel TypeScript、およびTypesScriptをインストールします.

npm i --save-dev jest @types/jest typescript @babel/preset-env @babel/preset-typescript typescript

Babelというファイルを追加します.設定.JSONまたはそれが既に存在するならば、1を編集してください

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.4"
      }
    ],
    "@babel/preset-typescript"
  ],
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

テストスクリプトをパッケージに追加します.それがすでにそこにあるならば、JSONまたはそれを変えてください.

"scripts": {
   ...
   "test": "jest --watch"
   ...
 }

あなたのテストを使用して、ファイルを必要とします.テスト.JSTの拡張はJESTファイルを見つけることができますので、セットアップに問題がある場合は
exemplo repo
ユニットテストの基礎
コードを簡単にテストするには、単体テストについていくつかの基礎を理解する必要があります.
何かをテストする2つの方法があります.

呼び出される関数の値を返します.

関数の副作用が呼び出されます.
機能をテストする理想的な方法は、最初のものです.それだけでなく副作用はテストのために悪いです、そして、また、あなたにとって悪いコード品質は全体的です、そして、あなたはできるだけ少ない非純粋な機能でコードベースを持つように努力しなければなりません.

純粋関数
純粋な関数は、戻り値がその入力値
E :

const sum = (x, y) => {
  return x + y;
}

コードで使用するより純粋な関数は、コードを理解し、機能性、テスト、およびリファクタを構成することが容易になります.実際には、純粋な関数を持っていない場合はリファクタリングしない方が良いでしょう.
それで、それ以外の純粋な機能は何ですか?

非pure関数

let x = 3;
const sum = (y) => {
  return x + y;
}

アプリケーションの状態に応じて変更されるリターン文の値を見ることができます.この場合、変数Xは、sum(1)を呼び出すことがあります.返り値は4となります.できるだけこのようなコードを書くのを避けてください.
あなたのコードをテストする第2の方法は、あなたがテストしている機能によって作成された副作用によるものです.

DOM相互作用のテスト

DOM相互作用は純粋ではない.
ボタンをクリックすると、このボタンがページの構造を変更すると、副作用が作成されました.
など

const $ = require('jquery');
const fetchCurrentUser = require('./fetchCurrentUser.js');

$('#button').click(() => {
  fetchCurrentUser(user => {
    const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
    $('#username').text(user.fullName + ' - ' + loggedText);
  });
});

この場合、ボタンをクリックすると、ユーザー名でHTMLタグが変更されたときに、テストしている関数、Click関数は、比較するために何かを返しませんでした.したがって、このようなテストをする唯一の方法は、副作用を目的の出力と比較することです.
テストファイルで.

$('#button').click();
expect($('#username').text()).toEqual('Johnny Cash - Logged In');

あなたは模範的な例を見て、完全な作業例を見ることができます.
Example Repo
スナップショットのテスト
場合によっては、結果を返すか、または副作用をあまりにも複雑に比較的に比較するか、またはその変化をかなりの周波数で変更をテストする必要があります
など

test('test function with huge json return value', () => {
  expect(getJSON()).toEqual(//...huge json here..//)
});

この場合、JSONの多くをテストしてテストするのが面倒で、コードを読むのが難しくなります.
それはスナップショットが救助に来るときです.
JSON全体をハンドで保存するか、別のファイルに保存する代わりに、JESTはあなたのためにこれを行うことができます、あなただけのスナップショット機能を使用する必要があります.

test('test function with huge json return value', () => {
  expect(getJSON()).toMatchSnapshot();
});

この場合、JEJNがどのような値を返すかを比較することができます.したがって、テストを実行してスナップショットを保存する前にGetJSONによって返される値が正しいことを確認する必要があります.
スナップショットが保存された後、テストを実行する度にGetJSONの戻り値と比較されます.
関数を変更してもう一度テストする必要がある場合は、“w”を押して“u”を押すか、または実行することができます

// In your terminal
jest --updateSnapshot

そして、それはJestでテストするためにかなり多くです、私がこのポストでカバーしなかったテストについて多くがあります.しかし、この初期の知識で、あなたが使用するJavaScriptのどんな風味でもテストを書き始めることができて、あなたのコードベースを展開して、反応とVueのようないくつかのフレームワークを使用して、同様の方法でそれらをテストすることもできます.
テストは完璧ではないことを覚えて、いくつかのテストをテストしていないよりも優れている今、任意のテストをせずにプロジェクトを起動するには口実を持っていない😄