I have this test
import { mount, RouterLinkStub, createLocalVue } from '#vue/test-utils'
import VueMask from 'v-mask'
import Vuex from 'vuex'
import RcLoginForm from '#/components/auth/login-form'
import authorization from '#/store/authorization'
const axios = require('axios')
const Login = require('./Login')
jest.mock('axios')
describe('RcLoginForm', () => {
let store
let wrapper
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VueMask)
beforeEach(() => {
store = new Vuex.Store({
namespaced: true,
...authorization
})
})
wrapper = mount(RcLoginForm, {
localVue,
store,
stubs: {
NuxtLink: RouterLinkStub,
},
})
and this function on my component
methods: {
...mapActions('authorization', ['loginHandler']),
async submit() {
this.fetching = true
const result = await this.loginHandler({
username: this.username,
I'm calling the login function by triggering event on button component
await wrapper.find('button').trigger('click')
get this error
[vuex] module namespace not found in mapActions(): authorization/
Related
I am testing though Jest on the Vue 2.x, nuxtjs and #nuxtjs/composition-api.
However, the state value in the components has undefined value when testing though jest
List.spec.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import { createLocalVue, shallowMount } from '#vue/test-utils';
import List from '#/components/home/list.vue';
Vue.use(Vuetify);
describe('List.vue', () => {
const localVue = createLocalVue();
let vuetify;
const $t = () => {};
const localePath = () => {};
beforeEach(() => {
vuetify = new Vuetify();
localVue.use(vuetify);
});
const mockOrder = [
{
coardshare: {
cs_id: 123,
},
},
{
talkboard: {
cs_id: 123,
},
},
];
it('11111', () => {
const wrapper = shallowMount(List, {
localVue,
vuetify,
propsData: { data: mockOrder },
mocks: { $t, localePath },
data() {
return {
data: mockOrder,
};
},
});
expect(wrapper.html()).toMatchSnapshot();
const title = wrapper.find('.v-card__title > span');
expect(title.text()).toBe('Foobar');
});
});
List.vue
<template>
...
<div v-for="item in state.data.talkboard" :key="item.cs_id">
<ListItem :item="item"></ListItem>
</div>
...
</template>
<script>
import { reactive, onMounted, useContext } from '#nuxtjs/composition-api';
import axios from 'axios';
import Header from './header';
import ListItem from './list-item.vue';
export default {
name: 'ListHome',
components: {
Header,
ListItem,
},
setup() {
const state = reactive({
data: [],
});
const { store } = useContext();
const fatch = async () => {
....
};
onMounted(fatch);
return {
state,
fatch,
};
},
};
</script>
error message
TypeError: Cannot read property 'data' of undefined
I am testing though Jest on the Vue 2.x, nuxtjs and #nuxtjs/composition-api.
However, the state value in the components has undefined value when testing though jest
why error on this ?? because of composition API that define the state with reactive() function ??
In your test file maybe you can try something like this:
it('11111', () => {
const wrapper = shallowMount(List, {
localVue,
vuetify,
propsData: { data: mockOrder },
mocks: { $t, localePath },
data: () => {
return {
data: mockOrder,
};
},
});
I want to use fresh Vuex store in every test, so I'm looking to replace default store with test store. Reason is that my Router is using store getter to check if user is allowed to access specific route.
The problem is that it always uses default store, which is not used by test component. I've tried to mock #\store, but looks like I'm missing something.
#\store\index.ts
import {createStore, Store} from 'vuex'
import {State} from '#vue/runtime-core'
import auth from "#/store/modules/auth";
export const createNewStore = (): Store<State> => (createStore({
modules: {
auth,
},
}))
export default createNewStore()
#\router\index.ts
import {createMemoryHistory, createRouter, createWebHistory, Router, RouteRecordRaw} from 'vue-router'
import store from '#/store';
const routes: Array<RouteRecordRaw> = [ ... ]
export const createNewRouter = (): Router => {
const isServer = Boolean(typeof module !== 'undefined' && module.exports)
const router = createRouter({
history: isServer ? createMemoryHistory() : createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => !record.meta.doesntRequiresAuth) && !store.getters['auth/isAuthenticated']) {
next({name: 'login'})
} else {
next()
}
})
return router
}
export default createNewRouter()
Current implementation looks like this:
#\views\__tests__\Login.spec.ts
import {render, screen} from '#testing-library/vue';
import AppComponent from '../../App.vue';
import userEvent from "#testing-library/user-event";
import {createNewRouter} from "#/router";
const {createNewStore} = jest.requireActual('#/store');
import {Router} from "vue-router";
describe('Login.vue', () => {
let router : Router
const renderComponentWithDependencies = async () => {
const mockStore = createNewStore();
jest.doMock('#/store', () => ({
__esModule: true,
default: mockStore,
}));
router = createNewRouter();
await router.push('/')
render(AppComponent, {
global: {
plugins: [router, mockStore],
}
})
}
beforeEach(async () => {
await renderComponentWithDependencies()
fetchMock.resetMocks();
});
it('User logs with correct username and pin', async () => {
const username = 'Pavel'
const pin = 'test'
fetchMock.mockResponseOnce(JSON.stringify({}));
fetchMock.mockResponseOnce(JSON.stringify({token: "123"}));
await screen.findByLabelText("Имя пользователя")
userEvent.type(screen.getByLabelText("Имя пользователя"), username)
await userEvent.click(screen.getByText('Запросить пин'))
userEvent.type(await screen.findByLabelText('Пин код'), pin)
await userEvent.click(screen.getByText('Войти'))
await router.isReady()
await screen.findByText('You are on home page')
})
})
Turns out there is way better solution I wasn't aware of, which doesn't require mocking - use jest.resetModules():
import {render, screen} from '#testing-library/vue';
import AppComponent from '../../App.vue';
import userEvent from "#testing-library/user-event";
import router from "#/router";
import store from '#/store';
describe('Login.vue', () => {
const renderComponentWithDependencies = async () => {
await router.push('/')
// We use App component instead of Login to test routing to homepage at the end of the login
render(AppComponent, {
global: {
plugins: [router, store],
}
})
}
beforeEach(async () => {
await renderComponentWithDependencies()
fetchMock.resetMocks();
jest.resetModules();
});
it('User logs with correct username and pin', async () => {
const username = 'Pavel'
const pin = 'test'
fetchMock.mockResponseOnce(JSON.stringify({}));
fetchMock.mockResponseOnce(JSON.stringify({token: "123"}));
await screen.findByLabelText("Имя пользователя")
userEvent.type(screen.getByLabelText("Имя пользователя"), username)
await userEvent.click(screen.getByText('Запросить пин'))
userEvent.type(await screen.findByLabelText('Пин код'), pin)
await userEvent.click(screen.getByText('Войти'))
await router.isReady()
await screen.findByText('You are on home page')
})
})
I try to send login data using axios and I get this error:
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property
'post' of undefined"
TypeError: Cannot read property 'post' of undefined
I used this.$http.post from documentation.
main.js
import Vue from "vue";
import App from "./App.vue";
import axios from "axios";
import VueAxios from "vue-axios";
import router from "./router/router";
import store from "./store/index";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
Vue.use(VueAxios, axios);
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount("#app");
store/index.js
import Vue from "vue";
import Vuex from "vuex";
import account from "./account.module";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
account
}
});
stroe/account/module.js
import jwt_decode from "jwt-decode";
import accountService from "../services/account.service";
const token = localStorage.getItem("token");
const user = token ? jwt_decode(token) : null;
const state = token
? { loggedIn: true, user }
: { loggedIn: false, user };
const getters = {
}
const actions = {
login({ commit }, user) {
return accountService.login(user).then(
data => {
if (data.status == "success") {
const user = jwt_decode(data.token);
commit("loginSuccess", user);
} else {
commit("loginFailure");
}
return data;
});
}
}
const mutations = {
loginSuccess(state, user) {
state.loggedIn = true;
state.user = user;
},
loginFailure(state) {
state.loggedIn = false;
state.user = null;
},
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
services/account.service.js
const apiUrl = "***";
export default {
login(user) {
return this.$http.post(apiUrl + "login", {
login: user.login,
password: user.password
}).then(response => {
if (response.data.status == "success") {
localStorage.setItem("token", response.data.token);
}
return response.data;
});
}
}
VueAxios only creates a wrapper around the passed in axios, so this.$http.post() is the same as axios.post().
Thus, you could use axios directly in your services file:
import axios from 'axios'; 👈
const apiUrl = "***";
export default {
login(user) {
👇
return axios.post(apiUrl + "login", {
login: user.login,
password: user.password
}).then(/*...*/);
}
}
I want to test a vuex module called user.
Initially, I successfully registered my module to Vuex. Its works as expected.
// 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
My user module is defined as follows
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
})
}
axios request file
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
When I want to write some test (using Jest), for example login action as shown above.
// 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..
})
How can I write test for my Login action? Thanks. Sorry for my beginner question.
EDIT: SOLVED Thank you Raynhour for showing to me right direction :)
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')
})
})
Store it's just a javascript file that will export an object. Not need to use 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')
})
})
but you need to remember that in unit tests all asynchronous requests must be mocked(with jest.mock or something else)
I have a router, Home, Login components and unit tests for the Login component.
The logic is: when user is unauthenticated, send him to Login page, once he's authenticated, send him to home page.
The logic works fine in the browser, however, when I run unit tests, I get an exception: thrown: undefined once the login component tries to navigate using this.$router.push('/');
In the console I see the message:
trying to route /login /
and then the exception is thrown once i run next();
Am I missing some setup to have the router working properly in the test environment?
Alternatively: is there a way to mock the next() function passed to the navigation guard?
Here's the router:
import VueRouter from 'vue-router';
import Home from '#/views/Home.vue';
import Login from '#/views/Login.vue';
import { state } from '#/store';
export const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
noAuthRequired: true,
},
},
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
router.beforeEach((to: any, from: any, next: any) => {
console.log('trying to route', from.fullPath, to.fullPath);
const isAuthed = !!state.user.token;
if (!to.meta.noAuth && !isAuthed) {
next({ name: 'login' });
} else {
next();
}
});
export default router;
The component (relevant part):
import Vue from 'vue';
import Component from 'vue-class-component';
import { axios } from '../plugins/axios';
#Component
export default class App extends Vue {
private credentials = {
email: '',
password: '',
};
private error = '';
private async login() {
try {
const data = await axios.post('http://localhost:5000/api/v1/user/auth', this.credentials);
const token = data.data.payload;
this.$store.dispatch('setUser', { token });
this.error = '';
this.$router.push('/');
} catch (error) {
console.warn(error);
this.error = error;
}
}
}
And the unit test:
import Vue from 'vue';
import Vuetify from 'vuetify';
import AxiosMockAdapter from 'axios-mock-adapter';
import { Wrapper, shallowMount, createLocalVue } from '#vue/test-utils';
import flushPromises from 'flush-promises';
import Vuex, { Store } from 'vuex';
import { axios } from '#/plugins/axios';
import VTest from '#/plugins/directive-test';
import LoginPage from '#/views/Login.vue';
import { mainStore, state, IState } from '#/store';
import VueRouter from 'vue-router';
import router from '#/router';
describe('Login page tests', () => {
let page: Wrapper<Vue>;
let localStore: Store<IState>;
const localVue = createLocalVue();
const maxios = new AxiosMockAdapter(axios);
const vuetify = new Vuetify();
const errorMessage = 'Input payload validation failed';
const emailError = 'Invalid Email format';
const validData = {
email: 'valid#email.com',
password: 'test pass',
};
// in order for "click" action to submit the form,
// the v-btn component must be stubbed out with an HTML button
const VBtn = {
template: '<button type="submit"/>',
};
localVue.use(Vuetify);
localVue.directive('test', VTest);
localVue.use(Vuex);
localVue.use(VueRouter);
beforeAll(() => {
maxios.onPost().reply((body: any) => {
const jsonData = JSON.parse(body.data);
if (jsonData.email !== validData.email) {
return [400, {
message: errorMessage,
errors: { email: emailError },
}];
}
return [200, { payload: 'valid-token' }];
});
});
beforeEach(() => {
try {
localStore = new Vuex.Store({
...mainStore,
state: JSON.parse(JSON.stringify(state)),
});
page = shallowMount(LoginPage, {
store: localStore,
router,
localVue,
vuetify,
stubs: {
VBtn,
},
attachToDocument: true,
sync: false,
});
} catch (error) {
console.warn(error);
}
});
afterEach(() => {
maxios.resetHistory();
page.destroy();
});
const submitLoginForm = async (data: any) => {
page.find('[test-id="LoginEmailField"]').vm.$emit('input', data.email);
page.find('[test-id="LoginPasswordField"]').vm.$emit('input', data.password);
page.find('[test-id="LoginBtn"]').trigger('click');
await flushPromises();
};
it('Redirects user to home page after successful auth', async () => {
await submitLoginForm(validData);
expect(page.vm.$route.path).toEqual('/');
});
});