JST用のvscodeタスク

私は何度かVscode - jest拡張子を試してみました.それは、自動的に失敗しているテストの約束と私のエラーリストに加えられている失敗が常にクールであるように思えたので、私は仕事で解決をまとめることができるかどうか見ることに決めました.
まず最初に、ジェストからの出力を解析することをより簡単にするために、JSTリポーターをセットアップします.レポーターのためのドキュメンテーションはかなり軽いです、しかし、感謝してくださいthere are type definitions . これが私の使うものです.

// custom reporter to make it easier to configure vscode to read problems
class CodeReporter {
  constructor(globalConfig, options) {
    this._globalConfig = globalConfig;
    this._options = options;
  }

  onRunStart(results, options) {
    console.log();
    console.log("-- RUN START");
  }

  onTestResult(test, testResult) {
    console.log(testResult.testFilePath);

    if (testResult.testExecError) {
      console.log(
        `-- failed;${
          testResult.testFilePath
        };1:1;${testResult.testExecError._originalMessage.replace(/\n/g, " ")}`
      );
    }

    testResult.testResults.forEach((r) => {
      if (r.status === "failed") {
        try {
          const stack = r.failureDetails[0].stack.split("\n");

          const frame1 = stack.findIndex((row) => row.startsWith("    at"));
          const location = stack[frame1].match(/[^:]*:([^:]*:[^:]*)/);

          console.log(
            `-- failed;${testResult.testFilePath};${
              location[1]
            };${r.failureDetails[0].message.replace(/\n/g, " ")}`
          );
        } catch (e) {
          console.log("ERROR", e);
        }
      }
    });
  }

  onRunComplete(contexts, results) {
    console.log();
    console.log("-- RUN COMPLETE");
  }
}

module.exports = CodeReporter;

VSCODEでの使用を意図しているので、それを私の中に入れます.vscode ディレクトリ.vscode/code-reporter.js .
現在、我々はAをセットアップする必要がありますtasks.json に.vscode 実際のテストタスクを設定するディレクトリ

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "test",
      "command": "./node_modules/.bin/jest",
      "args": [
        "--watch",
        "--color=false",
        "--reporters=\"<rootDir>/.vscode/code-reporter.js\""
      ],
      "isBackground": true,
      "problemMatcher": {
        "owner": "javascript",
        "fileLocation": "absolute",
        "pattern": {
          "regexp": "^-- failed;([^;]+);([^;]+);([^;]+)$",
          "file": 1,
          "location": 2,
          "message": 3
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "^-- RUN START",
          "endsPattern": "^-- RUN COMPLETE"
        }
      }
    }
  ]
}

これは冗談で走る--watch タスクをバックグラウンドタスクとして設定します.また、カスタムリポーター形式を使用して出力を解析します.すばらしいtask documentation VSCodeウェブサイトで.
それは設定のためです!テストタスクを開始するには、Ctrl - Shift - PTasks: Run Task , それから、test タスク.これは、最後のコミットから変更されたタスクを実行します.これはJestのデフォルトですが、端末でのJestと対話するようにVSCodeの端末でタスクとやりとりすることができます.
テストが実行されると、失敗したテストのエラーが強調表示されます.