https://im-developer.tistory.com/186
Webpack, React, Typescript, Jest 환경에서 Alias 적용하기 (절대 경로 import)
프로젝트의 크기가 커지고 복잡해질수록 상대 경로로 module을 import하기 힘들어진다. 여기 저기 왔다 갔다 하면서 나한테 필요한 파일들을 찾아내야하는데 여간 귀찮은 일이 아닐 수 없다. import R
im-developer.tistory.com
이 블로그에서 구원을 얻었습니다..
jest.config.ts
export default {
testEnvironment: 'jsdom',
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
moduleNameMapper: {
'^.+\\.svg$': 'jest-svg-transformer',
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
'@/(.*)$': '<rootDir>/src/$1',
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};
이렇게 moduleNameMapper 에
'@/(.*)$': '<rootDir>/src/$1',
를 사용해주면 pathallias를 사용한 import도 적절히 import를 해옵니다.
반응형
'testcode' 카테고리의 다른 글
jest --coverage 옵션을 통해 커버리지 확인하기 (1) | 2023.10.29 |
---|---|
react-query, zustand test jest 환경설정 승리한 썰 푼다 (2) | 2023.10.26 |
[jest] jest에서 안쓰는 import가 있으면 테스트 에러를 내요.. (0) | 2023.08.02 |
Vite Typescript 환경에서 Jest 설치하기 (1) | 2023.07.30 |
ts환경의 jest에서 window.matchMedia is not a function 해결하기 (0) | 2023.07.26 |
https://im-developer.tistory.com/186
Webpack, React, Typescript, Jest 환경에서 Alias 적용하기 (절대 경로 import)
프로젝트의 크기가 커지고 복잡해질수록 상대 경로로 module을 import하기 힘들어진다. 여기 저기 왔다 갔다 하면서 나한테 필요한 파일들을 찾아내야하는데 여간 귀찮은 일이 아닐 수 없다. import R
im-developer.tistory.com
이 블로그에서 구원을 얻었습니다..
jest.config.ts
export default {
testEnvironment: 'jsdom',
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
moduleNameMapper: {
'^.+\\.svg$': 'jest-svg-transformer',
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
'@/(.*)$': '<rootDir>/src/$1',
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};
이렇게 moduleNameMapper 에
'@/(.*)$': '<rootDir>/src/$1',
를 사용해주면 pathallias를 사용한 import도 적절히 import를 해옵니다.
반응형
'testcode' 카테고리의 다른 글
jest --coverage 옵션을 통해 커버리지 확인하기 (1) | 2023.10.29 |
---|---|
react-query, zustand test jest 환경설정 승리한 썰 푼다 (2) | 2023.10.26 |
[jest] jest에서 안쓰는 import가 있으면 테스트 에러를 내요.. (0) | 2023.08.02 |
Vite Typescript 환경에서 Jest 설치하기 (1) | 2023.07.30 |
ts환경의 jest에서 window.matchMedia is not a function 해결하기 (0) | 2023.07.26 |