解决vueJS单元测试时at('@')路径找不到模块的问题答案

【问题标题】：How to fix the problem about at('@') path can't find module when unit test on vueJS解决vueJS单元测试时at('@')路径找不到模块的问题
【发布时间】：2021-06-11 05:13:17
【问题描述】：

我遇到了一个问题。我有一个组件：

<template>
  <span :class="lightClassName">
    <i class="fas fa-circle markIcon" />
  </span>
</template>

<script>
import { EnumAttendanceStatuses } from "@/enums";

export default {
  // ...some code
}
</script>

我想为它写单元测试：

import { mount } from "@vue/test-utils";
import AttendanceStatusLight from "./AttendanceStatusLight.vue";

test("AttendanceStatusLight", () => {
  const wrapper = mount(AttendanceStatusLight);

  console.log(wrapper);
});

但是当我执行测试文件时，控制台打印错误：

我真的很想知道我该如何解决这个问题！感谢任何回答和评论！

【问题讨论】：

标签： vue.js unit-testing jestjs

【解决方案1】：

您可以将@ 替换为~

<template>
  <span :class="lightClassName">
    <i class="fas fa-circle markIcon" />
  </span>
</template>

<script>
import { EnumAttendanceStatuses } from "~/enums";

export default {
  // ...some code
}
</script>

【讨论】：

【解决方案2】：

更新您的Jest config's moduleNameMapper 以将@ 路径别名映射到您的src 目录：

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  }
}

考虑将 Vue CLI 与 Jest 插件一起使用，这已在 preset 中配置。

【讨论】：