Mock Service Workerを使ってサーバレスでE2Eテストを実施する

概要

• 前回はMock Service Worker(以下MSW)のデモを使って仕組みを見ていきました
• 今回も同デモを使用してE2Eテストの流れを見ていきます

準備

前回の記事を参考にMSWのデモ用ブランチからローカルに実行環境を用意してください。

E2Eテストコードを見てみる

E2Eテストコードは examples/rest-react/e2e に格納されています。

MSWはテストスクリプトに仕込むmockと異なり、ブラウザのリクエストをインターセプトする仕組みなのでテストコードに専用の実装を施す必要はありません。またJavascriptのアセットであるService Worker APIを利用しているので別途モックサーバを準備する必要もありません。

このデモに付属している以下のE2EテストコードはCypressを使用した初歩的なコードになっています。

examples/rest-react/e2e/Login.e2e.test.js

describe('Login', () => {
  before(() => {
    cy.visit('/')
  })

  describe('given I logged in using existing user', () => {
    before(() => {
      cy.get('#username').type('johnUser{enter}')
    })

    it('should display my user ID', () => {
      cy.get('[data-testid="userId"').should(
        'have.text',
        'f79e82e8-c34a-4dc7-a49e-9fadc0979fda'
      )
    })

    it('should display my first name', () => {
      cy.get('[data-testid="firstName"]').should('have.text', 'John')
    })

    it('should display my username', () => {
      cy.get('[data-testid="lastName"]').should('have.text', 'Maverick')
    })
  })
})

例のごとくこのコードにはバグが含まれているので、以下のように修正します。修正のついでに入力された username の検査も追加していきます。

describe('Login', () => {
  before(() => {
    cy.visit('/')
  })

  describe('given I logged in using existing user', () => {
    before(() => {
      /** 入力値を hoge へ変更 */
      cy.get('#username').type('hoge{enter}')
    })

    it('should display my user ID', () => {
      cy.get('[data-testid="userId"').should(
        'have.text',
        'f79e82e8-c34a-4dc7-a49e-9fadc0979fda',
      )
    })

    it('should display my first name', () => {
      cy.get('[data-testid="firstName"]').should('have.text', 'John')
    })

    /** この検査概要に記載ミスあったので修正 */
    it('should display last name', () => {
      cy.get('[data-testid="lastName"]').should('have.text', 'Maverick')
    })

    /** username の検査 */
    it('should display my username', () => {
      cy.get('[data-testid="username"]').should('have.text', 'hoge')
    })
  })
})

コマンドラインからE2Eテストを開始します。

$ yarn test:e2e

MSWとのfetchが正常に行われ、E2Eテストの結果は成功しました。

次は username の検査文字列を少し変えてテストしてみます。正しくテストできているのであれば、この検査は失敗するはずです。

cy.get('[data-testid="username"]').should('have.text', 'hogeAA')

期待通り、テストに失敗しました。

最後に

このようにMSWを利用することでE2Eテストで使用するサーバサイドAPIモックをサーバレスで簡単に構築することができますので、CI/CDでの活用も期待できますね。

参考