4

我正在尝试测试 vue 组件。

我有一个使用vuex. 我的状态存储在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')();

我该如何解决？

4

1 回答 1

2

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

要在支持下使用 jsdom 11.12+ ，您可以在测试之前运行的测试设置文件中自己localStorage将 jsdomwindow属性添加到范围：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);
于 2018-11-23T18:59:38.120 回答