Vue JS - 单元测试 - 未定义本地存储答案

【问题标题】：Vue JS - Unit test - localstorage is not definedVue JS - 单元测试 - 未定义本地存储
【发布时间】：2019-02-28 09:43:38
【问题描述】：

我正在使用 Mocha 和 chai 为 vue cli 3 编写单元测试。我试过嘲笑本地存储。但仍然收到此错误 - 'localStorage 未定义'。有人可以帮我吗？

我的代码是这样的——

import { expect, assert } from 'chai';
import { shallowMount } from '@vue/test-utils';
import LoginComponent from '@/views/LoginComponent.vue';
import Constants from '@/constants';

declare var global: any;
let wrapper;
let componentInstance: any;
let authData;
var mockLocalStorage = {
  getItem(key: any) {
    if (key === 'access_token') { return '/* a token object */'; }
    return 'null';
  }
};

describe('LoginComponent.vue', () => {
  beforeEach(() => {
    global.window = { localStorage: mockLocalStorage };

    authData = JSON.stringify(Constants.AUTH_DATA);

    wrapper = shallowMount(AliUMSLoginComponent, {
      propsData: { authData }
    });
    componentInstance = wrapper.vm;
  });

  it('has a created hook', () => {
    assert.isNotNull(componentInstance.authData);
  });
});

【问题讨论】：

标签： unit-testing local-storage mocha.js chai vue-cli-3

【解决方案1】：

对于可能偶然发现这个问题的任何其他人 - 以下内容对我有用：

1) 在您的单元测试文件夹中创建一个setup.js 文件并添加以下代码：

require('jsdom-global')();

global.localStorage = window.localStorage;

修复 “localStorage is undefined” 错误后，您可能会遇到其他错误（就像我一样）。最后，下面的代码 sn -p 修复了所有问题：

require('jsdom-global')(undefined, { url: 'https://localhost' });

global.localStorage = window.localStorage;
global.sessionStorage = window.sessionStorage;
window.Date = Date;

...您可以在此处找到更多信息：vuejs/vue-cli/issues/2128 和此处：vuejs/vue-test-utils/issues/936

2) 更新您的package.json 文件中的测试脚本以加载您刚刚创建的设置文件：

"test:unit": "vue-cli-service test:unit --require tests/unit/setup.js"

【讨论】：