Question

我想在带有Vue test-utils的Jest测试中使用辅助对象/函数，在我的项目根目录中有一个tests文件夹。

unitMocks.js在tests / unit / unitMocks.js中

export const mockComputed = {
  products() {
    return [1, 2, 3];
  },
  activities() {
    return [4, 5, 6];
  },
  ....
};

export const mockGetterProduct = () => {
...

Dashboard.spec.js在测试/单元/视图/
中

import Dashboard from "@/views/Dashboard.vue";
import { mockComputed } from "../unitMocks.js";
...

describe("Dashboard.vue", () => {
...

要导入此文件，我想避免使用相对路径（../unitMocks.js），所以我想知道如何访问相对根路径。

我知道babel root import plugin，并且还尝试修改vue.config.js的webpack别名：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        tests: "tests/"
      }
    }
  },
  ...

..但是导入该文件时，我的测试仍然找不到该文件。

是否没有 native 方式访问根路径（如@的{{1}}）？这与Webpack或Babel有关吗？

Answer 1

Webpack的resolve.alias可以通过moduleNameMapper在Jest配置中完成。具体来说，要添加映射到tests的{{1}}别名，请将以下内容添加到<rootDir>/tests/：

jest.config.js

然后，您可以像这样从测试脚本中导入moduleNameMapper: { '^tests/(.*)$': '<rootDir>/tests/$1', },：

tests/unit/foo.json

在测试文件夹中使用相对项目根路径导入Vue

1 个答案: