Currently, I am in the process of testing Vue components for my project.
The component I am working with is a single file Vue component that relies on vuex. The states are stored in store.js, which utilizes localStorage. However, when I execute the command npm test, an error occurs with the following message:
WEBPACK Compiled successfully in 9416ms
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
ReferenceError: localStorage is not defined
The testing tools that I am utilizing include: @vue/test-utils, expect, jsdom, jsdom-global, mocha, mocha-webpack
The way I run the tests is as follows:
"test": "mocha-webpack --webpack-config node_modules/laravel-mix/setup/webpack.config.js --require tests/JavaScript/setup.js tests/JavaScript/**/*.spec.js"
An example test file named order.spec.js looks like this:
require('../../resources/assets/js/store/store');
require('../../resources/assets/js/app');
import { mount } from '@vue/test-utils';
import Order from '../../resources/assets/js/views/order/List.vue';
import expect from 'expect';
describe('Order', ()=>{
it('has alert hidden by default', () => {
let wrapper = mount(Order);
expect(wrapper.vm.alert).toBe(false);
})
})
In the setup.js file, I include jsdom using the following code snippet:
require('jsdom-global')();
Now, the question arises how can I resolve this issue?