Как издеваться над AWS Amplify in Jest? - PullRequest
Новая
       104

Как издеваться над AWS Amplify in Jest?

0 голосов
/ 26 мая 2020

Я создаю приложение с Vue и использую Vue Test Utils и Jest в качестве среды модульного тестирования. Однако я столкнулся с проблемой при тестировании сценария, когда при неудачном входе в систему должны отображаться недопустимые учетные данные. Мне было интересно, как издеваться над Auth из AWS Amplify. Я не совсем уверен, правильно ли я провожу тестирование, потому что я новичок в модульном тестировании во внешнем интерфейсе.

Login. vue: 

import { Auth } from 'aws-amplify'
import { required } from 'vuelidate/lib/validators'

export default {
  name: 'loginComponent',
  data() {
    return {
      form: {
        email: null,
        password: null,
      },
      authErrMsg: '',
      isShowAuthErr: false,
      isLoading: false,
    }
  },
  validations: {
    form: {
      email: { required },
      password: { required }
    }
  },
  methods: {
    validateState(name) {
      const { $dirty, $error } = this.$v.form[name];
      return $dirty ? !$error : null;
    },
    onSubmit() {
      this.$v.$touch();
      if (this.$v.$invalid) {
        return
      }

      this.isLoading = true
      this.isShowAuthErr = false
      const { email, password } = this.form
      Auth.signIn(email, password).then(() => {
          this.isLoading = false
          this.$store.dispatch('ACTION_SET_LOGGEDIN_STATUS', true)
          this.$router.push({ name: 'home' })
      }).catch(() => {
          this.isLoading = false
          this.authErrMsg = 'Invalid login credentials'
          this.$store.dispatch('ACTION_SET_LOGGEDIN_STATUS', false)
          this.isShowAuthErr = true
      })

    }
  }
}

Login.spe c. js: 

import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
import Login from '@/components/Login'
import BootstrapVue from 'bootstrap-vue'
import Vuelidate from 'vuelidate'
import Vuex from 'vuex'
import Auth from '@aws-amplify/auth'
import flushPromises from 'flush-promises'

const localVue = createLocalVue()
localVue.use(BootstrapVue)
localVue.use(Vuelidate)
localVue.use(Vuex)
localVue.use(Auth)

let wrapper
beforeEach(() => {
  wrapper = mount(Login, { localVue, 
    form: {
      email: null,
      password: null,
    }
  })
})

describe('Login', () => {

  it('should error message on failed login', async () => {
    wrapper.find('input[name="email"]').setValue('email@gmail.com')
    wrapper.find('input[name="password"]').setValue('123ABC')
    wrapper.find("form").trigger("submit.prevent")
    await flushPromises()
    Auth.signIn = jest.fn().mockImplementation(() => {
      throw new Error('Incorrect username or password.')
    });
    expect(Auth.signIn()).rejects.toThrow()
  })

})

Я получил ошибку:

TypeError: невозможно прочитать свойство clientMetadata из undefined

...