3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Lightning Web Components(Jest)

Last updated at Posted at 2019-02-01

####事前準備
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ファイル)を入れる。

Screen Shot 2019-02-19 at 21.39.14.png

※ 上記はただの慣習的なネーミングコンベンションであり、このフォルダ名でないと実行できないわけではない

####テストの実行
DXプロジェクトのルートフォルダで下記のコマンドを実行する('test'はpackage.jsonで登録したスクリプト名に合わせること)

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の左側のバーからデバッグアイコンをクリックする。
Screen Shot 2019-02-19 at 21.55.34.png

"Debug Jest Tests" を選択して、緑色の実行ボタンを押すとデバッガー上でテストモジュールが実行される。
Screen Shot 2019-02-19 at 21.56.31.png

実行時に node が見つからないというエラーが出る場合は、runtimeExecutableをlaunch.jsonに追加する。nodeモジュールの場所はコマンド which node で調べる。

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

VS Code上でデバッガーが起動する。
Screen Shot 2019-02-19 at 21.58.43.png

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?