在节点 13.9.0 上使用 nuxt 进行开玩笑测试时导入 vue-awesome 图标错误

Question

我已按照 https://github.com/Justineo/vue-awesome

上的说明进行操作

在我的 jest.config.js 中添加以下内容

transformIgnorePatterns: [
    '/node_modules(?![\\/]vue-awesome[\\/])/'
]

我的nuxt.config.js

build: {
  transpile: [/^vue-awesome/] // enable font-awesome integration.
},

当我运行打开开发框时，图标工作得很好，但是当我运行 yarn test:

[path/to/project]/node_modules/vue-awesome/icons/building.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

明确地说，问题似乎与 babel 如何读取（或忽略）Icon 组件导入上方的导入有关。因此，例如，给定上面错误日志中的 building.js，这是导入在 vuejs 文件中的样子：

<script>
import 'vue-awesome/icons/building'
import Icon from 'vue-awesome/components/Icon'

export default {
  componentes: {
    'v-icon': Icon
  }
  ...
}
</script>

Answer 1

看来我必须在文件顶部（导入下方）显式模拟组件及其导入

以下适用于我的测试。

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import { AxiosSpy, MockNuxt } from 'jest-nuxt-helper'
import index from '@/pages/courses/index'

// MOCKS:
jest.mock('vue-awesome/icons/building', () => '')
jest.mock('vue-awesome/components/Icon', () => '<div></div>')

...

在节点 13.9.0 上使用 nuxt 进行开玩笑测试时导入 vue-awesome 图标错误

import vue-awesome icons error while jest testing with nuxt on node 13.9.0

font-awesome

vue.js

jestjs

babel-jest

nuxt.js