Vue JS - 单元测试 - localstorage 未定义

Question

我正在使用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);
  });
});

- Mangesh Daundkar

Answer 1

对于其他可能遇到这个问题的人 - 以下方法适用于我：

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

require('jsdom-global')();

global.localStorage = window.localStorage;

在解决"localStorage未定义"错误后，你可能会遇到其他错误（就像我一样）。最终，以下代码片段修复了所有问题：

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"

- Andrew Aponte

Answer 2

我已经让你的解决方案运行了，但是当尝试使用grep运行一个文件时，它会运行所有文件。

1. 有没有更好的方法来包含这个文件，也许在文件顶部包含一个文件？通常，包含一个方法会返回一些内容。嗯，怎么做呢？

2. 这是package.json文件的正确语法吗：

"test:unit-filter": "vue-cli-service test:unit --require tests/unit/helpers/setup.js --watch --grep"

- David Pell