jest error: process() or/and processAsync() method of code transformer found at fileTranformer.cjs

의존성 패키지

  "devDependencies": {
    "jest": "29.3.1",
    "react": "18.2.0",
    ...
  }

 

문제

test 환경에서 png 이미지 파일을 못읽어오는 에러가 발생

 error: `process()` or/and `processAsync()` method of code transformer found at fileTranformer.cjs "/fileTransformer.cjs" should return an object or a Promise resolving to an object. 

 

 

원인

jest는 기본적으로 코드를 JavaScript로 실행한다. Node가 지원하지 않는 syntax인 JSX, TypeScript 같은 코드를 곧바로 사용하려면 plain JavaScript로 변환해야 한다.

jest에서는 이를 transform이라는 설정 옵션을 통해서 어떤 코드를 변환할 것 인지 설정할 수가 있다. 

 

jest 28버전 이후부터 transformer가 string을 반환하는 것에서 object형을 반환하는 것으로 변경된 듯하다. (현재 https://jestjs.io/docs/upgrading-to-jest28#transformer 문서는 Not found라 확인은 불가)

그리하여 transformer 파일에서 모듈을 export 하는 부분을 object형으로 바꿔준다. 

 

해결

https://jestjs.io/docs/code-transformation#typescript-with-type-checking 참고 

ASIS

//jest.config.cjs

module.exports = {
  roots: ['<rootDir>/src/'],
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  transform: {
    '^.+\\.(ts|tsx)$': [
      'ts-jest',
    ],
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/fileTransformer.cjs',
  },
  ...
  }

 

//fileTransformer.cjs

const path = require('path');

module.exports = {
  process(src, filename) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

 

TOBE

//fileTransformer.cjs

const path = require('path');

module.exports = {
  process(sourceText, sourcePath, options) {
    return {code: 'module.exports = ' + JSON.stringify(path.basename(sourcePath)) + ';'};
  },
};

 

이미지파일을 import 해오는건 브라우저 번들에 이미지를 포함시키는 방법이나, javascript 코드는 아니기때문에 jest에서 이를 처리하기 위해 import해온 path값을 파일 이름으로 바꾸도록 해야한다.

 

도움받은 글

https://stackoverflow.com/questions/73550984/invalid-return-value-in-simple-jest-test