Jest용 VSCode 작업

나는 VSCode Jest 확장을 몇 번 시도했지만 그다지 성공하지 못했습니다. 즉, 테스트가 자동으로 실행되고 내 오류 목록에 오류가 추가된다는 약속은 항상 멋져 보였기 때문에 작업과 함께 솔루션을 함께 구성할 수 있는지 확인하기로 결정했습니다.

먼저 Jest의 출력을 더 쉽게 구문 분석할 수 있도록 Jest Reporter를 설정합니다. 기자용 문서는 꽤 가볍지만 다행히 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 로 넣습니다.

이제 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와 함께 jest를 실행하고 작업을 백그라운드 작업으로 구성합니다. 또한 사용자 정의 리포터 형식을 사용하여 출력을 구문 분석합니다. VSCode 웹 사이트에는 훌륭합니다task documentation.

구성은 여기까지입니다! 테스트 작업을 시작하려면 Ctrl-Shift-P(Mac에서는 Cmd-Shift-p)를 누르고 Tasks: Run Task 를 선택한 다음 test 작업을 선택합니다. Jest의 기본값이므로 마지막 커밋 이후 변경된 작업을 실행하지만 터미널에서 Jest와 상호 작용하는 것처럼 VSCode의 터미널에서 작업과 상호 작용할 수 있습니다.

테스트가 실행되면 실패한 테스트에 대한 오류 강조 표시가 나타납니다.