如何让 localStorage 在 vue 测试中工作答案

【问题标题】：How to get localStorage working in vue testing如何让 localStorage 在 vue 测试中工作
【发布时间】：2019-03-13 20:14:42
【问题描述】：

我正在尝试测试 vue 组件。

我有一个使用 vuex 的 vue 单文件组件。我的状态存储在store.js 中，它使用了localStorage。但是，当我运行 npm test 时，我收到如下错误：

WEBPACK 9416ms 编译成功

摩卡测试...

加载测试时出现RUNTIME EXCEPTION 异常

ReferenceError: localStorage 未定义

我用于测试的工具： @vue/test-utils、expect、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')();

我该如何解决这个问题？

【问题讨论】：

标签： javascript vue.js mocha.js tdd vue-test-utils

【解决方案1】：

jsdom-global 使用的是旧版本的 jsdom。 jsdom 从 11.12.0 开始支持localStorage。

要使用支持 localStorage 的 jsdom 11.12+，您可以在测试前运行的测试设置文件中自己将 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);

【讨论】：