Импорт Vue с относительным корневым путем проекта в тестовой папке

Question

Я хочу использовать вспомогательный объект / функцию в тесте Jest с помощью Vue test-utils, где у меня есть папка tests в корне моего проекта.

unitMocks.js в тестах /unit / unitMocks.js

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

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

Dashboard.spec.js в тестах / unit / views /

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

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

Чтобы импортировать это, я хочу избежатьиспользуя относительный путь (../unitMocks.js), поэтому мне было интересно, как получить доступ к относительному корневому пути.

Мне известен плагин для импорта корневых файлов babel , и я также пытался изменитьпсевдоним webpack моего vue.config.js:

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

.. но мой тест все равно не найдет этот файл при его импорте.

Нет ли native способ доступа к корневому пути (например, @ для src)?Это связано с Webpack или Babel?

Answer 1

Webpack resolve.alias может быть выполнен в конфигурации Jest с moduleNameMapper.В частности, чтобы добавить псевдоним tests, сопоставленный с <rootDir>/tests/, добавьте следующее к jest.config.js:

moduleNameMapper: {
  '^tests/(.*)$': '<rootDir>/tests/$1',
},

Затем вы можете импортировать tests/unit/foo.json из своих тестовых сценариев следующим образом:

// In tests/x/y/z/example.spec.js
import foo from 'tests/unit/foo.json';