Как я могу проверить действия в модуле Vuex? - PullRequest
Новая
       5

Как я могу проверить действия в модуле Vuex?

0 голосов
/ 08 февраля 2020

Я хочу протестировать модуль vuex под названием user.

Сначала я успешно зарегистрировал свой модуль в Vuex. Работает, как и ожидалось. 

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  }
})

export default store

Мой пользовательский модуль определен следующим образом: 

store/modules/user.js

const state = {
  token: getToken() || '',
}

export const getters = {
  token: state => state.token,
}

const mutations = {
  [SET_TOKEN]: (state, token) => {
    state.token = token
  }
}

const actions = {
  [LOGIN] ({ commit }, body) {
    return new Promise((resolve, reject) => {
      login(body).then(response => { //login is an api method, I'm using axios to call it.
        const { token } = response.data
        setToken(token)
        commit(SET_TOKEN, token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

login api 

api/auth.js
import request from '@/utils/request'

export function login (data) {
  return request({
    url: '/auth/login',
    method: 'post',
    data
  })
}

ax ios файл запроса 

utils/request
import axios from 'axios'
import store from '@/store'
import { getToken } from '@/utils/auth'

const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API_URL,
  timeout: 5000
})

request.interceptors.request.use(
  config => {
    const token = getToken()
    if (token) {
      config.headers['Authentication'] = token
    }
    return config
  }
)

export default request

Когда я хочу написать какой-нибудь тест (используя Jest ), например, действие входа в систему, как показано выше. 

// user.spec.js
import { createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'

import actions from '@/store/modules/user'

const localVue = createLocalVue()
localVue.use(Vuex)

test('huhu', () => {
  expect(true).toBe(true)
  // implementation..
})

Как мне написать тест для моего действия по входу? Спасибо. Извините за мой вопрос для начинающих.

РЕДАКТИРОВАТЬ: РЕШЕНО Спасибо Raynhour за то, что показали мне правильное направление:) 

import { LOGIN } from '@/store/action.types'
import { SET_TOKEN } from '@/store/mutation.types'
import { actions } from '@/store/modules/user'
import flushPromises from 'flush-promises'

jest.mock('@/router')
jest.mock('@/api/auth.js', () => {
  return {
    login: jest.fn().mockResolvedValue({ data: { token: 'token' } })
  }
})

describe('actions', () => {
  test('login olduktan sonra tokeni başarıyla attı mı?', async () => {
    const context = {
      commit: jest.fn()
    }
    const body = {
      login: 'login',
      password: 'password'
    }
    actions[LOGIN](context, body)
    await flushPromises()
    expect(context.commit).toHaveBeenCalledWith(SET_TOKEN, 'token')
  })
})

1 Ответ

0 голосов
/ 08 февраля 2020

Store - это просто javascript файл, который будет экспортировать объект. Не нужно использовать vue test util. 

import actions from '../actions'
import flushPromises from 'flush-promises'
jest.mock('../api/auth.js', () => {
  return {
   login: jest.fn()..mockResolvedValue('token')
  }; // mocking API. 

describe('actions', () => {
  test('login should set token', async () => {
    const context = {
      commit: jest.fn()
    }
    const body = {
      login: 'login',
      password: 'password'
    }
    actions.login(context, body)
    await flushPromises() // Flush all pending resolved promise handlers
    expect(context.commit).toHaveBeenCalledWith('set_token', 'token')
  })
})

, но вы должны помнить, что в модульных тестах все асинхронные запросы должны быть смоделированы (с помощью jest.mock или чего-то еще)

...