「Jest」の記事 - Crieit

Jest で DOM 操作の試験、 console.error を無視

2022-04-23T01:06:29+09:00

Jest によるテストコードを書く上でいくつか嵌まったポイントをピックアップ。

DOM 操作の試験

まず引っかかったのは DOM 操作。今回はバリバリ DOM を操作したりある要素が存在しているかのチェックをする、といった完全に DOM ありきのコードを対象にしていました。

機能のユニットテストであれば直感的に分かるのですが、 DOM 操作って……。

sample/assert.js

const dom = `

`;

module.exports = dom;

sample/exception.js

const dom = `

`;

module.exports = dom;

tests/hoge.test.js

const hoge = require('../src/hoge');
const domAssert = require('../sample/assert');
const domException = require('../sample/exception');

test('method:hoge test:assert', () => {
    document.body.innerHTML = domAssert;
    const hogeDOM = document.querySelector('#hoge');
    const hogeInstance = new hoge();
    expect(hogeInstance.judge(hogeDOM)).toBe(true);
});
test('method:hoge test:exception', () => {
    document.body.innerHTML = domException;
    const hogeDOM = document.querySelector('#hoge');
    const hogeInstance = new hoge();
    expect(hogeInstance.judge(hogeDOM)).toBe(false);
});

例えば hoge という id属性が付与された DOM が存在するか否かのチェックをする hogeクラスに対して judge()メソッドをテストしたい場合。

DOM となるHTMLタグのコードを JS の文字列としてセット
それを module.exports
テストコードで　require() し、コード内の document.body.innerHTML へ代入する
後は通常の JS のように document.querySelector なり何なりで操作やチェックが可能。属性であれば getAttribute() してあげれば良い

……わりと素直にできることが分かりました。 Jest すごい。

The error below may be caused by using the wrong test environment

さて、上述でわりと直感的に DOM 操作した上でテストコードを記述できる、と記載しましたがいざテストをしようとすると以下のエラーが発生しました (Jest が 27系以上)。

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.

これは Jest に DOM 操作用の設定が必要なためのようです。

解決策としては2つ。

テストコード内に設定を記述

まずはテストコード内に設定を記述する方法。これはテストコードごとに設定を変更できる柔軟性がある一方、必要な場合は全てのテストコードで同じ記述をする必要があるため数が多いと面倒になる、というパターン。

/**
 * @jest-environment jsdom
 */

jest.config.js

もう1つは jest.config.js に記述する方法。こちらは一括指定ができるものの、テストコードごとの設定はできないので先程とは逆ですね。

module.exports = {
    testEnvironment: 'jsdom',     // 追加
    coverageDirectory: 'coverage'
};

console.error() を無視

テスト対象のコードで例外等の際に console.error() を使用していると、そのコードに入ったときに Jest が止まってしまいます。

そこで、 console.error() に遭遇しても Jest が止まらないようにする方法を。

const hoge = require('../src/hoge');
const domException = require('../sample/exception');

test('method:fuga test:exception', () => {
    jest.spyOn(console, 'error').mockImplementation((mes) => {
        console.log(mes);
    });
    document.body.innerHTML = domException;
    const hogeDOM = document.querySelector('#hoge');
    const hogeInstance = new hoge();
    expect(hogeInstance.fuga(hogeDOM)).toBe(false);
});

例えばこんな感じ。 jest.spyOn(console, 'error') ... を実際のコードを走らせる前に記述しておくことで console.error() で止まらなくなります。

参考

The error below may be caused by using the wrong test environment

Jestの「 The error below may be caused by using the wrong test environment」の解決方法 - Qiita

GitHub ActionsでJestを叩くときのタイムゾーンと言語を設定する

2021-08-30T17:14:25+09:00

GitHub リポジトリにプッシュした時、GitHub Actions のワークフローで自動的に Jest を走らせるようにしています。GitHub 上で自動的に走る Jest と、手動で直接叩く Jest との違いはタイムゾーンとロケールです。ここでは、GitHub 上で Jest を動かすときに環境変数としてタイムゾーンとロケールを指定する方法について説明します。

1. package.json にグローバル設定ファイルを指定する

以下のように設定を追記します。jest-global-setup.jsに設定を記載すれば、環境変数から読み込まれた値を上書きできます。

  "jest": {
    "globalSetup": "./jest-global-setup.js"
  },

2. jest-global-setup.js の中身を記載する

タイムゾーンと言語を指定します。

module.exports = async () => {
  process.env.TZ = "Asia/Tokyo";
  process.env.LANG = "en_US.UTF-8";
};

3. 動作結果を確認する

Jest のテストで出力される日時の文字列を確認したところ、言語が日本語から英語になっていることが確認できました。

    -     "date": "Wed Apr 01 2020 09:00:00 GMT+0900 (日本標準時)",
    +     "date": "Wed Apr 01 2020 09:00:00 GMT+0900 (Japan Standard Time)",

📝 Jest で private readonly な値をモックする方法

2021-03-08T01:51:05+09:00

はじめに

Jest でクラスの private readonly な変数を差し替えたい時に若干引っかかったのでメモっておきます。タイトルでは Jest とありますが、本記事の内容は JavaScript でモックする際の有効な手法の 1 つとして利用することが可能です。

Object.defineProperty を利用して値を差し替える

結論から言うと変数を差し替えたい場合は下記のような記述になります。

const mockValue = "";
Object.defineProperty(service, "privateReadOnlyValue", {
  value: mockValue,
});

ちなみに関数を差し替えたい場合は下記のような記述になります。

Object.defineProperty(service, "privateSumFunction", {
  value: jest.fn((a, b) => a + b),
});

各種テストケースで使いまわしているインスタンスの private readonly な変数をモックした場合、値をリストアしたいケースも出てきました。その場合の記述としては、下記が有効でした。

// tmpService 変数に service インスタンスを clone して利用する
const tmpService = Object.create(service);
Object.defineProperty(tmpService, "privateReadOnlyValue", {
  value: "",
});

おわりに

Object.defineProperty と Object.create を駆使すれば大体のケースでは事足りそうです。

参考リンク

Jest を触ってみる

2020-11-22T13:54:50+09:00

経緯

個人的にはどうしても後回しにされがちなテストコードについて、少しでも精神的な障壁を下げるべく Jest を軽く触ってみることにしました。

PHPUnit についてはPHPUnitとXdebugでコードカバレッジの出力を試すで触ったことがあるので、ユニットテストの雰囲気は掴んでいます。

そこで今回は JS 側を……ということで Jest を触ってみることにします。

今回は本当に最初の最初だけ。基本的にはJestで始める！ユニットテスト - 環境の準備とテストの実行 | CodeGridの記事の通りに進めます。

```json:package.json
{
"name": "finality_jest",
"version": "0.0.1",
"description": "jestのテスト",
"main": "sum.js",
"scripts": {
"test": "jest",
"test:coverage": "jest --coverage"
},
"author": "",
"license": "ISC",
"devDependencies": {
"jest": "^26.6.3"
}
}


`npm init` した後 `yarn add --dev jest` で Jest を追加。 npm scripts にテスト実行とカバレッジ出力のスクリプトを追記。

### sum.js

```javascript:sum.js
const sum = (a, b) => {
    return a + b;
};

module.exports = sum;

ほぼ記事のママです。

jest.config.js

```javascript:jest.config.js
module.exports = {
coverageDirectory: 'coverage'
};


現状では有効なオプションを指定していませんが、 `coverages` に変更してカバレッジ出力されるディレクトリが変化したことは確認できたので、後はテストケースに併せてこの辺(英: [Configuring Jest · Jest](https://jestjs.io/docs/en/configuration), 日: [Configuring Jest · Jest](https://jestjs.io/docs/ja/configuration))のオプションをカスタマイズしていけば良いのかな、と思います。

### __test__/sum.test.js

```javascript:sum.test.js
const sum = require('../sum');

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

こちらもほぼママ。実際に使用する場合はテストコードが増えていくと思われるので予めディレクトリに入れておく方向性で考えました。

その場合、ファイル名末尾を .test.js にする必要はないのですが、実際のコードと同じ名前にすると、今回は sum.js と __test__/sum.js の区別がエディタ上で付きづらいので、結局 sum.test.js と末尾に .test.js を付ける方向の方が良いのかな、と感じました。

ディレクトリ構造

以上を踏まえてディレクトリ構造は以下のようになりました。

  /
  ├ __test__/
  │    └ sum.test.js
  ├ .gitignore
  ├ jest.config.js
  ├ package.json
  └ sum.js

実行結果

これでテストを実行。

> yarn test:coverage
$ jest --coverage
 PASS  __tests__/sum.test.js
  √ adds 1 + 2 to equal 3 (3 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 | 
 sum.js   |     100 |      100 |     100 |     100 | 
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.061 s
Ran all test suites.
Done in 6.86s.

OKですね。

試しに sum.js を以下のように変更します。

```javascript:sum.js
const sum = (a, b) => {
return a - b;
};

module.exports = sum;


加算ではなく減算にしました。これで再度テスト実行。

```bash
> yarn test:coverage
yarn run v1.22.4
$ jest --coverage
 FAIL  __tests__/sum.test.js
  × adds 1 + 2 to equal 3 (6 ms)

  ● adds 1 + 2 to equal 3

    expect(received).toBe(expected) // Object.is equality

    Expected: 3
    Received: -1

      2 | 
      3 | test('adds 1 + 2 to equal 3', () => {
    > 4 |     expect(sum(1, 2)).toBe(3);
        |                       ^
      5 | });
      6 | 

      at Object. (__tests__/sum.test.js:4:23)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 | 
 sum.js   |     100 |      100 |     100 |     100 | 
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        4.363 s
Ran all test suites.
error Command failed with exit code 1.

怒られますね。OKです。

元に戻して再度実行。

今度は生成された coverage ディレクトリを辿ります。 coverage/lcov-report/ を開くと以下のようにカバレッジが出力されていました。

参考記事の通り、パッケージ一つでここまでできると助かりますね。

「Jest」の記事 - Crieit

Jest で DOM 操作の試験、 console.error を無視

DOM 操作の試験

sample/assert.js

sample/exception.js

tests/hoge.test.js

The error below may be caused by using the wrong test environment

テストコード内に設定を記述

jest.config.js

console.error() を無視

参考

DOM操作

The error below may be caused by using the wrong test environment

undefined 判定

null 判定

(未使用) 非同期

console.errorで止まらないように

GitHub ActionsでJestを叩くときのタイムゾーンと言語を設定する

1. package.json にグローバル設定ファイルを指定する

2. jest-global-setup.js の中身を記載する

3. 動作結果を確認する

📝 Jest で private readonly な値をモックする方法

はじめに

Object.defineProperty を利用して値を差し替える

おわりに

参考リンク

Jest を触ってみる

経緯

準備

package.json

jest.config.js

ディレクトリ構造

実行結果

参考