Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

5
0

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 3 years have passed since last update.

e2eテストのTestCafeで APIをモックする方法

Posted at

e2e(end to end)テストを実装できるフレームワークであるTestCafeにおいて、APIをモックする方法についてです。

コードは以下のようなケースを想定しています

  • メールアドレスを入力して登録するあるページがあるとします。
  • メールアドレスの重複チェックがAPI経由でなされるパターンで、テストにおいてはそのチェックが不要である場合、mockを差し込む
    • 私の環境では、テスト上で絶対に不要というわけではなかったのですが、APIからなぜか419 unknown statusが帰ってきてしまってエラーで落ちるので一旦mockにしました

import { RequestMock, Selector } from 'testcafe'

// モックの動きを先に登録しておきます
const mock = RequestMock()
  .onRequestTo(/.*\/user\/registrable_email/)
  .respond({ can_register: true }, 200)

// テスト対象ページの設定などをするfixtureでrequestの時にhookとしてmockを差し込みます
fixture('登録ページ')
  .page(`http://localhost/simple_register`)
  .requestHooks(mock)

// 通常通りテストを書きます
test('登録して登録完了ページに遷移', async (t) => {
  await t
    .typeText(Selector('input[name="email"]'), 'test@example.com')
    .expect(t.eval(() => document.location.href))
    .match(/.*register_completed/, { timeout: 10000 })
})

expect の書き方については @zackey2 さんのこちらの記事が参考になります。

5
0
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
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?