Question

我刚开始在Vue中进行单元测试，并且已经遇到了第一个组件的障碍。

这是我的测试

import { shallowMount } from '@vue/test-utils';
import GeoframeLibrary from '@/views/GeoframeLibrary.vue';

describe('GeoframeLibrary', () => {
  const wrapper = shallowMount(GeoframeLibrary);

  it('renders', () => {
    expect(wrapper.element).toMatchSnapshot();
  });
});

问题是GeoframeLibrary.vue导入一个文件，该文件又导入另一个文件，该文件又导入了我的Vuex存储初始化，然后：

 FAIL  tests/unit/GeoframeLibrary.spec.ts
  ● Test suite failed to run

    TypeError: Cannot read property 'use' of undefined

       8 | import { AuthState } from './modules/auth';
       9 | 
    > 10 | Vue.use(Vuex);
         |     ^
      11 | 
      12 | const vuexPersist = new VuexPersistence({
      13 |   key: 'onspot',

      at Object.<anonymous> (src/store/index.ts:10:5)
      at Object.<anonymous> (src/adonis-api/api-call.ts:7:1)
      at Object.<anonymous> (src/adonis-api/auth.ts:1:1)
      at Object.<anonymous> (src/adonis-api/index.ts:1:1)
      at src/views/GeoframeLibrary.vue:55:1
      at Object.<anonymous> (src/views/GeoframeLibrary.vue:66:3)
      at Object.<anonymous> (tests/unit/GeoframeLibrary.spec.ts:3:1)

大多数Vue单元测试教程都过于简单化，并且没有涵盖这些实际场景。我需要我的组件导入其他代码以执行专门的例程。如何解决此问题并获得 not 不遵循导入的测试，或以某种方式模拟Vue.use绝对不执行任何操作？ Vuex实际上根本不是我的组件的一部分，它恰好出现在错误中，因为它已被导入。

编辑：的确是一个奇怪的情况。这是复制存储库： https://github.com/ffxsam/repro-jest-importing

如果您将src/adonis-api/crud-factory.ts中的第17行注释掉，则测试运行良好。很很奇怪。哦，如果您注释掉src/adonis-api/api-call.ts中的第8行，它也可以修复测试。

Answer 1

这是vue-cli回购中的一个问题。他们的默认tsconfig.json未设置"esModuleInterop": true。显然，这可以解决该问题（出于我无法理解的原因）。

如何在Vue中获取单元测试以停止升级导入层次结构

1 个答案: