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

cypress アロー関数と通常の関数の書き方で挙動が異なる件について

Last updated at Posted at 2021-07-21

最近cypressを使い始めてアロー関数と通常の関数の書き方で挙動が異なる件で少しハマってしまったので一応メモ。

失敗例

以下が自分の失敗してたサンプルの書き方になります。beforeEachフックでusers.jsonのalias「users」を定義し、this.usersでアクセスしたところundefinedになってしまう。。

cypress/integration/sample.js
describe('詳細ページのテスト', () => {
    beforeEach(() => {
        cy.fixture('users').as('users')
    })  

    it('モーダルのテスト', () => {
        //モーダルを開くボタンをクリック
        cy.get('[data-testid=modal_open_btn]').click()
        //モーダルを開いた後メールアドレスを入力欄に記入
        cy.get('[data-testid=modal_input]').click()
            .click()
            .type(this.users.email) //ここでなぜかメールアドレスを取得できない
        //確認ボタンが押せるようになっていることを確認(インラインバリデーションしている前提)
        cy.get('[data-testid=confirm_btn]').click()
            .click()
            .should('be.enabled')
    })  
})
cypress/fixtures/users.json
{
  "username": "テストユーザー",
  "email": "testuser@sample.com"
}

上記のテストを実行すると

error TypeError: Cannot read property 'users' of undefined

と怒られてしまいました。

成功例

原因が分からなかったので色々問題を切り分けて考えていくと、以下のようにアロー関数ではなく通常の関数の書き方で書くと取得できることに気が付きました。

cypress/integration/sample.js
describe('詳細ページのテスト', () => {
    beforeEach(() => {
        cy.fixture('users').as('users')
    })  

    it('モーダルのテスト', function() { //⇦ ここを変更
        //モーダルを開くボタンをクリック
        cy.get('[data-testid=modal_open_btn]').click()
        //モーダルを開いた後メールアドレスを入力欄に記入
        cy.get('[data-testid=modal_input]').click()
            .click()
            .type(this.users.email) //ここでなぜかメールアドレスを取得できない
        //確認ボタンが押せるようになっていることを確認(インラインバリデーションしている前提)
        cy.get('[data-testid=confirm_btn]').click()
            .click()
            .should('be.enabled')
    })  
})

ちゃんと公式ドキュメントを見るとアロー関数で定義した関数内から定義したaliasにthis.*でアクセスできないことが記載されてました。
アロー関数を使う場合はまた違うデータへのアクセス方法が記載されているので是非そちらも参考にしてみてください(個人的にはthisの方がシンプルに書けて好き)。

ただ、cypressで採用しているライブラリのMochaのドキュメントではアロー関数を使用することは推奨していないとのことです(https://mochajs.org/#arrow-functions)。

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