Vue Test Utils / Jest - 구성 요소 방법 내에서 클래스 방법이 호출되었는지 테스트하는 방법

Vue Test Utils / Jest - 구성 요소 방법 내에서 클래스 방법이 호출되었는지 테스트하는 방법

나는 나의 단위 시험에 흥미로운 문제가 있다.내 유닛 테스트는 부품 안의 버튼을 클릭하기 위해 작성된다.이 버튼은 클래스의 인스턴스를 포함하는 구성 요소 메서드를 호출함Service(Axios에 대한 래퍼 클래스).이 구성 요소 방법이 하는 유일한 일은 호출이다.Service.requestPasswordReset()내 유닛 테스트는 다음을 검증해야 한다.Service.requestPasswordReset부름을 받았다.

나는 내가 서비스 클래스를 올바르게 조롱하고 있다는 것을 안다. 왜냐하면 이 클래스는 내 유닛 테스트에서 통과하기 때문이다.

await Service.requestPasswordReset()
expect(Service.requestPasswordReset).toHaveBeenCalled()

그리고 나는 클릭할 때 정확하게 메소드를 호출하고 있다는 것을 안다. 왜냐하면 이것은 나의 유닛 테스트에서 통과하기 때문이다.

await wrapper.find('button').trigger('click')
expect(mockMethods.resend).toHaveBeenCalled()

나는 단지 내 시험을 볼 수 없어서 그 시험을 볼 수 없어.Service메소드가 호출된다.좋은 생각 있어?

구성 요소

<template lang="pug">
Layout
    section
        header( class="text-center py-4 pb-12")
            h1( class="text-grey-boulder font-light mb-4") Recovery Email
            p( class="text-orange-yellow") A recovery email has been sent to your email address

        div( class="text-center")
            div( class="mb-6")
                button(
                    type="button"
                    @click.stop="resend()"
                    class="bg-orange-coral font-bold text-white py-3 px-8 rounded-full w-48"
                ) Resend Email
</template>

<script>
import Layout from '@/layouts/MyLayout'
import Service from '@/someDir/Service'
export default {
    name: 'RecoveryEmailSent',
    page: {
        title: 'Recovery Email Sent',
    },
    components: {
        Layout,
    },
    data() {
        return {
            errorMessage: null
        }
    },
    computed: {
        userEmail() {
            const reg = this.$store.getters['registration']
            return reg ? reg.email : null
        },
    },
    methods: {
        async resend() {
            try {
                await Service.requestPasswordReset({
                    email: this.userEmail,
                })               
            } catch (error) {
                this.errorMessage = error
            }
        },
    },
}
</script>

서비스js

import client from '@/clientDir/BaseClient'

class Service {
    constructor() {
        this.client = client(baseUrl)
    }

    requestPasswordReset(request) {
        return this.client.post('/account_management/request_password_reset', request)
    }
}

export { Service }

export default new Service()

서비스.js in__mock__

export default {
    requestPasswordReset: jest.fn(request => {
        return new Promise((resolve, reject) =>
            resolve({
                data: {
                    statusCode: 'Success',
                },
            })
        )
    })
}

단위 테스트

jest.mock('@/someDir/Service')
import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
import RecoveryEmailSent from './AccountManagement.RecoveryEmailSent'
import Service from '@/someDir/Service'
const localVue = createLocalVue()
// localVue.use(Service) // <-- Tried this, didn't work

describe('Recovery Email Sent', () => {

    it('should resend recovery email', async () => {
        const mockMethods = {
            resend: jest.fn()
        }
        const email = 'testemail@test.com'
        const wrapper = mount(RecoveryEmailSent, {
            localVue,
            computed: {
                userEmail() {
                    return email
                },
            },
            methods: mockMethods
        })

        // await Service.requestPasswordReset()
        await wrapper.find('button').trigger('click')
        expect(mockMethods.resend).toHaveBeenCalled()
        expect(Service.requestPasswordReset).toHaveBeenCalled()
    })
})

난 이해했다.보아하니, 제스트의.toHaveBeenCalled()해당 방법이 매개 변수를 사용하여 호출된 경우 true가 반환되지 않음.반드시 사용해야 한다..toHaveBeenCalledWith()그들의 문서에는 이런 주의사항이 없지만, 그런 것 같다.

여기 내 합격 시험 코드가 있다.

it('should resend email hash', async () => {
    const email = 'testemail@test.com'
    const wrapper = mount(AccountManagementForgottenPasswordSubmitted, {
        localVue,
        computed: {
            userEmail() {
                return email
            },
        },
    })

    await wrapper.find('button').trigger('click')
    expect(Service.requestPasswordReset).toHaveBeenCalledWith({
        email: email
    })
})

주입 로더를 사용하여 서비스를 조롱할 수 있음

기본 아이디어:

const RecoveryEmailSentInjector = require('!!vue-loader?inject!./AccountManagement.RecoveryEmailSent')
import Service from '@/someDir/Service'

const mockedServices = {
  '@/someDir/Service': Service
}

describe('Recovery Email Sent', () => {

    it('should resend recovery email', async () => {
      const RecoveryEmailSentWithMocks = RecoveryEmailSentInjector(mockedServices)

      const wrapper = mount(RecoveryEmailSentWithMocks, { 
        ...
      })
      await wrapper.find('button').trigger('click')
      expect(mockMethods.resend).toHaveBeenCalled()
      expect(mockedServices.requestPasswordReset).toHaveBeenCalled()
    })
})

참조URL: https://stackoverflow.com/questions/51904424/vue-test-utils-jest-how-to-test-if-class-method-was-called-within-a-componen