Jest を使用して静的サイト ジェネレーターをテストする

これまでは、自分の Static Site Generator(SSG) に新しい機能やコードを追加することに専念してきましたが、今回はテストを実装しました.テストは、ソフトウェアの管理と進化に役立ちます.
過去に Jasmine、Karma、Mocha について学習しましたが、私の SSG は単純な JavaScript を使用しているため、Jest を使用して単体テストを行うことにしました.

インストール

すでに npm をインストールしているので、npm i jest --save-dev を使用して Jest をインストールしました.

コマンド ラインでテストを実行するために、次の npm スクリプトも追加しました.

"scripts": {
    "test": "jest --",
    "test:watch": "jest --watch --",
    "coverage": "jest --collectCoverage --"
}

冗談のテスト

まず、テストファイルを作成し、スタイルパスが指定されていない場合について書きました.

describe("Argument match tests", () => {
  test("no specified style", () => {
    expect(
      tempGenerator("", "language", "title", "titleName", "text")
    ).argv_s = `<link rel="stylesheet" type="text/css" href="please_add_your_css_path" />`;
  });

describe は、いくつかの関連するテストをグループ化するブロックを作成できるため、HTML テンプレートを含むファイルに対して、「引数一致テスト」と「関数引数テスト」の 2 つのブロックを用意しました.
Jest は実際のテスト ブロックである test を使用する必要があるため、expect に何を出力として取得するかを記述しました.
引数がない、引数が 1 つない、引数が null である、などの他のテストを追加しました.
引数が 1 つ足りないことに取り組んだとき、テストに合格しなかったため、テンプレート JavaScript ファイルを変更して、コード let body = text ? ${text} : ""; を追加する必要がありました.

すべてのテストに合格すると、この画面が表示されます.

PS C:\Users\Mizuho\Desktop\OSD600\pajama-ssg> npm test
> [email protected] test
> jest --
 PASS  ./tempGenerator.test.js
  Argument match tests
    √ no specified style (2 ms)
    √ no specified laungage (1 ms)
    √ no specified title
    √ no specified text (1 ms)
  Function argument tests
    √ input all arguments (1 ms)
    √ missing style
    ...
    √ missing all arguments
    √ null arguments
Test Suites: 1 passed, 1 total
Tests:       12 passed, 12 total
Time:        1.046 s
Ran all test suites.

カバレッジ

可能な限り多くのコード パス テスト ケースが含まれるように、package.json スクリプトに追加した Coverage を試してみました.( npm run coverage )さらに重要なことは、どの部分が欠けているかです.次の結果が得られました.

------------------|---------|----------|---------|---------|-------------------
File              | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
------------------|---------|----------|---------|---------|-------------------
All files         |     100 |      100 |     100 |     100 |
 tempGenerator.js |     100 |      100 |     100 |     100 |
-----------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       12 passed, 12 total
Snapshots:   0 total
Time:        0.934 s, estimated 1 s
Ran all test suites.

行き詰まった📌

ファイルシステムがテストに合格するかどうかをテストしたかったので、モックと _mock_ フォルダーと fs.js ファイルを内部に実装しようとしました.ただし、このエラーが発生し、機能しませんでした.

  ● Test suite failed to run
    TypeError: Cannot read properties of undefined (reading 'forEach')
      54 |
      55 | // Read files/lines
    > 56 | argv.i.forEach((input) => {
         |        ^
      57 |   if (!fs.existsSync(input)) {
      58 |     console.error("Input is not a file or directory!");
      59 |     return;

私は周りを検索しましたが、解決策を見つけることができませんでした. npm mock-fs は、モックをより簡単に使用するためのオプションの1つであることがわかりました.私はそれを理解できることを願っています.

結論

以前に React コンポーネントのテストを行ったことがありますが、テストだけでは不十分であるというフィードバックを受け取りました.テストは非常に重要ですが、状況によっては難しいことを学びました.今回は小さな単体テストを追加しただけなので、統合テストもやってみたいと思います. 1月から生協として品質保証アナリストになるので、これからも頑張っていきたいと思います👩‍💻