JestでLightning Web Componentのテストコードを実装する方法

{
  ...
  "scripts": {
    ...
    "test": "npm run test:unit",
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",
    "test:unit:coverage": "sfdx-lwc-jest --coverage",
    ...
  },
  ...
}

<template>
   <div class="content">
       <template if:true={accountRecord}>
           <div class="name">
               <div>取引先名:</div>
               <div>{name}</div>
           </div>
       </template>
   </div>

   <lightning-card title="取引先責任者" icon-name="custom:custom107">
       <template if:true={contacts}>
           <template for:each={contacts} for:item="contact">
               <p key={contact.Id}>{contact.LastName} {contact.FirstName}</p>
           </template>
       </template>
  </lightning-card>
</template>

import { LightningElement, wire, api, track } from 'lwc';

import { getRecord } from 'lightning/uiRecordApi';
import getContacts from '@salesforce/apex/MyAccountLwcCompController.getContacts';

import ACCOUNT_NAME from '@salesforce/schema/Account.Name';

export default class MyAccountLwcComp extends LightningElement {
    // 取引先Id
    @api recordId;
    // 取引先レコード
    accountRecord;
    // 取引先責任者
    contacts;

    // 取引先名
    name = '';

    @wire(getRecord, { recordId: '$recordId', fields:[ACCOUNT_NAME] })
    wiredRecord({ data }) {
        if (data) {
            this.accountRecord = data;
            this.name = data.fields.Name.value;
        }
    }

    @wire(getContacts, { accountId: '$recordId' })
    wiredContacts({ data }) {
        if (data) {
            this.contacts = data;
        }
    }
}

public with sharing class MyLwcComp1Controller {

    @AuraEnabled(cacheable=true)
    public static List<Contact> getContacts(Id accountId){
        return [
            SELECT Id, Name
            FROM Contact
            WHERE AccountId = :accountId
        ];
    }
}

# LWC Jest
**/__tests__/**

import { createElement } from 'lwc';
import MyAccountLwcComp from 'c/myAccountLwcComp'; // テスト対象lwcインポート

// ワイヤーアダプターインポート
// 標準Lightning Data Service
import { registerLdsTestWireAdapter } from '@salesforce/sfdx-lwc-jest';
// Apex クラス
import { registerApexTestWireAdapter } from '@salesforce/sfdx-lwc-jest';

// lwcに使われたワイヤーサービスをインポート
import { getRecord } from 'lightning/uiRecordApi';
import getContacts from '@salesforce/apex/MyAccountLwcCompController.getContacts';

// テスト用ワイヤーアダプター登録
const getRecordWireAdapter = registerLdsTestWireAdapter(getRecord);
const getContactsWireAdapter = registerApexTestWireAdapter(getContacts);

// ワイヤーアダプターのテスト用レスポンスをインポート
const mockGetRecord = require('./data/getRecord.json');
const mockGetContacts = require('./data/getContacts.json');

// describeはテストスイートに相当します
// describe内複数のit(), test() をぶら下がることが可能
// 1番目の引数はテストスイート名で、コマンドでファイル作成する場合
// 自動的に設定されます。
describe('c-my-account-lwc-comp', () => {
    afterEach(() => {
        // afterEachはdescribeブロック内
        // 各it()、もしくはtest()が実行完了した後に実行されます
        while (document.body.firstChild) {
            // it()、test() 開始時に作成したlwcのDOMをクリアする
            document.body.removeChild(document.body.firstChild);
        }
    });

    // it(), test() はテストケースに相当します。it は test の略称なので
    // it() を使うか test() を使うかは開発者の好みでいいです。
    // なお、コマンドでファイル作成する場合、デフォルトはit()
    // 1番目の引数はテストケース概要で、テスト目的がわかる情報を記入します。
    it('testGetRecord', () => {
        // lwcのDOMを作成する
        const element = createElement('c-my-account-lwc-comp', {
            is: MyAccountLwcComp
        });
        document.body.appendChild(element); //lwcのDOMをdocumentに入れる

        //@wire のダミーサーバー通信結果生成
        getRecordWireAdapter.emit(mockGetRecord);

        return Promise.resolve().then(() => {
            const content = element.shadowRoot.querySelector('.content');
            const nameField = mockGetRecord.fields.Name.value;

            //テンプレートリレラル（` backtick）
            expect(content.textContent).toBe(`取引先名:${nameField}`)
        });
    });

    test('testGetContacts', () => {
        const element = createElement('c-my-account-lwc-comp', {
            is: MyAccountLwcComp
        });
        document.body.appendChild(element);

        //@wire のダミーサーバー通信結果生成
        getContactsWireAdapter.emit(mockGetContacts);

        return Promise.resolve().then(() => {
            const contactElements = element.shadowRoot.querySelectorAll('p');
            expect(contactElements.length).toBe(
                mockGetContacts.length
            );
        });
    });
});

{
   "fields": {
       "Name": {
           "value": "デモ取引先"
       }
   }
}

[
  {
    "Id": "1",
    "LastName": "test",
    "FirstName": "contact A1"
  },
  {
    "Id": "2",
    "LastName": "test",
    "FirstName": "contact A2"
  },
  {
    "Id": "3",
    "LastName": "test",
    "FirstName": "contact A3"
  }
]