“argv.config.match가 함수가 아님” 문제 해결하기

소개

create-react-app으로 jest.config.js를 구성하려고 할 때 문제가 발생하나요? package.json에서 jest 구성을 분리하는 것은 까다로워 보일 수 있지만 걱정하지 마세요! 이 블로그 포스트에서는 이 과정을 안내하고 일반적으로 발생할 수 있는 오류에 대한 해결책을 제공할 것입니다. 시작해봅시다!

에러: argv.config.match는 함수가 아닙니다

“argv.config.match is not a function” 오류는 테스트를 실행하는 동안 --config 플래그를 사용할 때 발생할 수 있는 일반적인 오류입니다. 이 문제를 해결하기 위해서는 옵션 앞에 “–“를 추가해야 합니다.

"test": "react-scripts test -- --config jest.config.js"

옵션 앞에 추가하는 “–“를 통해 react-scripts가 구성 옵션을 올바르게 인식할 수 있도록 합니다.

다른 접근 방법: Jest CLI 사용

이전 해결책이 동작하지 않는다면, 대안적인 방법으로 Jest CLI를 직접 사용하는 것이 있습니다. Jest CLI를 사용하여 테스트를 실행하면 react-scripts로 인해 발생하는 문제를 우회할 수 있습니다.

Jest CLI를 사용하여 테스트를 실행하려면 먼저 dev 종속성으로 설치되어 있는지 확인하세요:

npm install jest --save-dev

그 다음, package.json의 “test” 스크립트를 업데이트하세요:

"test": "jest --watch"

이 구성을 사용하여 다음 명령어로 테스트를 실행할 수 있습니다:

npm test

package.json에서 Jest 구성하기

구성을 package.json 파일에 유지하고 싶다면, “jest” 키 아래의 개체로 jest 구성을 정의할 수 있습니다:

"jest": {
  "collectCoverageFrom": [
    "src/**/*.js",
    "!**/node_modules/**"
  ],
  "coverageReporters": [
    "text-summary",
    "lcov",
    "cobertura"
  ],
  "testMatch": [
    "**/*.test.js"
  ]
}

package.json 파일에서 구성을 직접 지정함으로써 별도의 jest.config.js 파일이 필요하지 않습니다.

Jest와 함께 Enzyme 사용하기

React 컴포넌트를 테스트하기 위해 Enzyme을 사용하고 있다면, src/ 폴더에 setupTests.js 파일이 있는지 확인하세요. 이 파일은 테스팅 모듈에서 인식되며 반드시 정확한 이름으로 지정되어야 합니다. 이 파일은 React 버전에 맞는 Enzyme 어댑터를 구성해야 합니다.

// src/setupTests.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({
  adapter: new Adapter()
})

React 버전에 맞는 올바른 Enzyme 어댑터를 설치하는 것을 기억하세요. React v16의 경우 enzyme-adapter-react-16을 사용하고, React v15의 경우 enzyme-adapter-react-15를 사용하세요.

결론

create-react-app과 함께 jest.config.js를 구성하는 것은 처음에는 어려울 수 있지만, 올바른 접근 방식으로 어떤 오류든 문제를 해결할 수 있습니다. 이 블로그 포스트에서는 jest.config.js를 성공적으로 구성하기 위한 다양한 해결책과 접근 방식을 살펴보았습니다. 이 안내서가 도움이 되었기를 바라며, 이제 create-react-app과 함께 jest.config.js를 원활하게 사용할 수 있기를 바랍니다.

참고 자료 : 

reactjs