最近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）。

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

失敗例

成功例