Lightning Web Components (Jest)

사전 준비

Jest를 사용하려면 npm과 Node.js를 로컬 환경에 설치하십시오. stable 버전의 이용이 추천되고 있다.
Mac에 설치
Windows에 설치

npm과 Node의 설치가 끝나면 lwc 용 프로젝트 폴더로 이동 한 다음 npm을 사용하여 lwc 용 Jest를 도입합니다.

cd ~/lwc_project   //プロジェクトフォルダに移動
npm install
npm install @salesforce/lwc-jest --save-dev

루트/package.json 파일에 테스트 실행 스크립트를 등록합니다.
npm init -y를 실행하여 생성 된 package.json에 다음을 추가합니다. ※ 스크립트명의 "test"부분은 임의의 문자열로 OK

"scripts": {
    "test": "lwc-jest"
 },

테스트 클래스 만들기

DX 프로젝트의 루트에 _tests_ 폴더를 만들고 거기에 테스트 모듈 (네이밍 규칙 : xx.test.js)을 만듭니다. data 폴더에는 Mock 데이터(서버로부터의 반환값을 정의한 JSON 파일)을 넣는다.



※ 상기는 단지 관습적인 네이밍 컨벤션이며, 이 폴더명이 아니면 실행할 수 없는 것은 아니다

테스트 실행

DX 프로젝트의 루트 폴더에서 다음 명령을 실행합니다.

npm run test

VS Code에서 디버깅

명령 프롬프트에서 실행하는 것 외에도 VS Code에서 JS 코드를 디버그 실행할 수 있습니다.

루트 폴더/.vscode/launch.json 파일을 만들고 다음을 정의합니다.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Jest Tests",
            "type": "node",
            "request": "launch",
            "runtimeArgs": [
                "--inspect-brk",
                "${workspaceRoot}/node_modules/.bin/jest",
                "--runInBand"
            ],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "port": 9229
        }
    ]
}

VS Code의 왼쪽 막대에서 디버그 아이콘을 클릭합니다.


"Debug Jest Tests"를 선택하고 녹색 실행 버튼을 누르면 디버거에서 테스트 모듈이 실행됩니다.


런타임에 node를 찾을 수 없다는 오류가 발생하면 runtimeExecutable을 launch.json에 추가합니다. node 모듈의 위치는 명령 which node를 참조하십시오.

            "port": 9229,
            "runtimeExecutable": "/Users/xxx/.nodebrew/current/bin/node"

VS Code에서 디버거가 시작됩니다.