Question

我正在尝试测试vue组件。

我有一个使用T的vue单个文件组件。我的状态存储在使用vuex的{{1}}中。但是，当我运行store.js时，出现错误消息：

WEBPACK在9416毫秒内成功编译

MOCHA测试...

RUNTIME EXCEPTION加载测试时发生异常

ReferenceError：未定义localStorage

我用于测试的工具： @ vue / test-utils，expect，jsdom，jsdom-global，mocha，mocha-webpack

我如何运行测试：

localStorage

一个示例测试，npm test：

"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文件中，我正在像这样加载jsdom：

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

我该如何解决？

Answer 1

jsdom-global使用的是jsdom的旧版本。自11.12.0起，jsdom就支持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);

如何使LocalStorage在Vue测试中工作

1 个答案: