Как заставить localStorage работать в тестировании vue - PullRequest
Новая
       3

Как заставить localStorage работать в тестировании vue

0 голосов
/ 09 октября 2018

Я пытаюсь протестировать компоненты vue.

У меня есть отдельный файловый компонент vue, который использует vuex.Мои состояния хранятся в store.js, который использует localStorage.Однако, когда я запускаю npm test, я получаю сообщение об ошибке:

WEBPACK успешно скомпилировано в 9416ms

MOCHA Testing ...

RUNTIME EXCEPTION Исключение произошло во времязагрузка ваших тестов

ReferenceError: localStorage не определено

Инструменты, которые я использую для тестирования: @ vue / test-utils, ожидается, jsdom, jsdom-global, mocha, mocha-webpack

Как я запускаю тесты: 
"test": "mocha-webpack --webpack-config node_modules/laravel-mix/setup/webpack.config.js --require tests/JavaScript/setup.js tests/JavaScript/**/*.spec.js"

Образец теста, order.spec.js: 

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);
    })
})

В setup.js загружаемом файлеjsdom вот так: 

require('jsdom-global')();

Как мне это исправить?

1 Ответ

0 голосов
/ 23 ноября 2018

jsdom-global использует старую версию jsdom.jsdom поддерживает localStorage с 11.12.0.

Чтобы использовать jsdom 11.12+ с поддержкой localStorage, вы можете добавить свойства jsdom window в область действия global самостоятельно в файле установки теста, который запускаетсяперед вашими тестами: 

/* setup.js */

const { JSDOM } = require('jsdom');

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

function copyProps(src, target) {
  Object.defineProperties(target, {
    ...Object.getOwnPropertyDescriptors(src),
    ...Object.getOwnPropertyDescriptors(target),
  });
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
global.requestAnimationFrame = function (callback) {
  return setTimeout(callback, 0);
};
global.cancelAnimationFrame = function (id) {
  clearTimeout(id);
};
copyProps(window, global);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...