체인의정석

jest.config - mouduleNameMapper @ 경로 인식 에러 해결하기 본문

개발

jest.config - mouduleNameMapper @ 경로 인식 에러 해결하기

체인의정석 2021. 7. 22. 10:49
728x90
반응형

jest를 사용하기 위해서는 jest.config를 잘 설정해 주어야 한다.

경로의 경우 따로 설정을 해주었기 때문에 

 

다음과 같이 mouduleNameMapper를 사용하여야 경로 지정이 인식되게 된다.

다음과 같이 map을 사용하여 이미지나 스타일 같은 경로를 쉽게 인식 시킬 수 있다.

{
  "moduleNameMapper": {
    "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
    "^[./a-zA-Z0-9$_-]+\\.png$": "<rootDir>/RelativeImageStub.js",
    "module_name_(.*)": "<rootDir>/substituted_module_$1.js",
    "assets/(.*)": [
      "<rootDir>/images/$1",
      "<rootDir>/photos/$1",
      "<rootDir>/recipes/$1"
    ]
  }
}

https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring

 

Configuring Jest · Jest

Jest's configuration can be defined in the package.json file of your project, or through a jest.config.js, or jest.config.ts file or through the --config option. If you'd like to use your package.json to store Jest's config, the "jest" key should be used o

jestjs.io

이를 실제로 활용하여 오류를 해결해 보았다.

현재 코드에서는 

@lib와 같은 경로를 자주 사용한다.

type.config에 이것이 정의되어 있다.

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2019",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "paths" : {
      "@lib/*": ["./lib/*"],
      "@test/*": ["./test/*"]
   }
  },
  "include": ["lib", "test", "test/**/**.ts"],
  "exclude": ["node_modules", "dist"]
}

ts config 에서 paths를 사용하여 위와 같이 지정해 주어야 경로지정을 해줄 수 있다.

 

여기에 맞추어서 jest config에서도 다음과 같이 지정을 해주어야 경로지정이 인식되는 것이다.

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

를 넣어주었다.

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleNameMapper: {
    '^@lib/(.*)$': '<rootDir>/lib/$1',
},

};

 

728x90
반응형
Comments