programing

테스트 폴더에 상대 프로젝트 루트 경로를 사용하여 Vue 가져오기

goodsources 2022. 7. 11. 21:32
반응형

테스트 폴더에 상대 프로젝트 루트 경로를 사용하여 Vue 가져오기

Vue test-utils를 사용한 Jest 테스트에서 도우미 오브젝트/함수를 사용하고 싶다.tests폴더입니다.

unitMocks.js테스트/유닛/유닛 Mocks.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", () => {
...

이것을 Import 하려면 , 상대 패스를 사용하지 않게 해 주세요.../unitMocks.js)그래서 상대 루트 패스에 어떻게 접속해야 하는지 궁금했어요.

저는 babel root import 플러그인에 대해 알고 있으며, 또한 제 웹 팩 에일리어스를 수정하려고 했습니다.vue.config.js:

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

..가져올 때 테스트에서 파일을 찾을 수 없습니다.

루트 패스에 액세스 할 수 있는 네이티브 방법은 없습니까?@위해서src)? Webpack이나 Babel과 관련이 있습니까?

웹 팩resolve.alias를 사용하여 Jest Configuration을 실행할 수 있습니다.구체적으로는, 를 추가해 주세요.tests매핑된 에일리어스<rootDir>/tests/, 다음 항목을 추가합니다.jest.config.js:

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

그러면 Import할 수 있습니다.tests/unit/foo.json테스트 스크립트에서 다음과 같이 처리됩니다.

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

언급URL : https://stackoverflow.com/questions/52893171/vue-import-with-relative-project-root-path-in-test-folder

반응형