javascript - (VUEX + JEST) 函数响应未定义

Question

我在编写测试时遇到了问题。我无法调用该函数，尽管一切似乎都写得正确。请帮忙！

索引.vue：

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Login from '../index'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('Проверяем страницу входа в систему', () => {

    let actions
    let store
    let loginData = {username: 'user1', password: '123'}

    beforeEach (() => {
        actions = {
            handleLogin: jest.fn(),
            login: jest.fn()
        }
        store = new Vuex.Store({
            actions
        })
    })

    it('Отправляем экшн логирования', () => {
        const wrapper = shallowMount(Login, {
            computed: {
                loginBtn: () => true,
                loginStatus: () => '',
                showLogoutEverywhereBtn: () => false
            },
            store,
            localVue
        })

        wrapper.find('.main-form__login-submit').trigger('click')
        expect(actions.handleLogin).toHaveBeenCalled()
    })
});

这是我在 index.vue 中的函数：

...
methods: {
        handleLogin(e) {
            e.preventDefault()
            this.$store.dispatch('login', this.loginForm)
                .then((response) => {
                    console.log('login page response: ', response)
                    if (response.id_user !== undefined) {
                        this.$router.push({ path: '/' })
                    }
                })
                .catch((e) => {
                    console.log('ты внутри ошибки: ', e);
                });
        },
...

这是我的 user.js：

...
actions: {
        // user login
        login({ commit }, userInfo) {
            console.log('store/modules/user.js userInfo: ', userInfo)
            const { username, password } = userInfo
            return new Promise((resolve, reject) => {
                login({ user_login: username.trim(), user_password: password }).then(response => {            
                    const decoded = jwtDecode(response)
                    console.log(decoded)
                    /***********************SOCKET.IO***************************/
                    let data = { userId: decoded.id_user, page: 'login' }
                    socketUrl.emit('authorize', data, (flag) => {
                        console.log('Main authorize here.')
                        console.log('This is store token id:', decoded.id_user)
                        console.log(flag)
                        if (decoded.status === 0) {
                            commit('CHANGE_SELECTED_USER_STATUS_ID', 392)
                            console.log(decoded.full_name)
                            // commit('SET_TOKEN', decoded)
                            commit('AUTH_SUCCESS', decoded)
                            if (flag) {
                                resolve(decoded)
                                console.log('This is decoded: ', decoded.statuses[0])
                                getStatusesArray().then(response => {
                                    console.log('This is presencestatus data:', response)

                                    commit('UPDATE_STATUS', response)
                                })
                            } else {
                                commit('AUTH_ERROR')
                            }
                            resolve() // TODO: зачем это здесь?
                        } else {
                            commit('AUTH_ERROR')
                        }
                    })
                    socketUrl.on('kick', (message) => {
                        console.log('store.js socket: ', message)
                        commit('DUPLICATE_LOGIN', message.text)
                    })
                    socketUrl.on('message', () => {
                        commit('AUTH_ERROR')
                    })
                    /***********************SOCKET.IO***************************/
                }).catch(error => {
                    console.log('store/modules/user.js login error: ', error)
                    commit('AUTH_ERROR')
                    reject(error)
                })
            })
        },

        logout(state, payload) {
            state = null
            console.log('Logout userId: ', payload)
            socketUrl.emit('disconnectUser', { userId: payload }) 

            return new Promise ((resolve, reject) => {
                logout({ userId: payload })
                    .then(response => {
                        console.log('logout function', response)
                        resolve(response)
                    })
                    .catch((e) => {
                        console.log('logout error: ', e)
                        reject(e)
                    })
            }) 
        },
...

我将非常感谢任何愿意提供帮助的人。由于我是测试新手，这个问题占用了我很多时间。也许在某个地方我需要将参数传递给函数（我不确定确切的位置）。先感谢您！

标签： javascriptvue.jsjestjsvue-test-utils

Answer 1

现在我看到了：

看，你在嘲笑handleLogin商店行动。但这不是您的商店行动。这是您在组件中的方法。

所以你需要做的是：

... // your previous code

wrapper.setMethods({ handleLogin: jest.fn() })  // add this line here
wrapper.find('.main-form__login-submit').trigger('click')

... // your next code