현업에서 테스트 환경 복구하기

우리 회사의 테스트 환경이 유지보수되고 있지 않아 테스트 환경을 복구하는 업무를 맡게 되었다.
jest를 실행하며 마주한 에러들과 그것을 해결했던 과정을 공유하고자 한다.

우리 회사의 프론트엔드 프레임워크로는 Vue2와 Quasar v1을 기반으로 하고있다.

SyntaxError: Cannot use import statement outside a module 에러

babel은 최신 ES6의 기능을 어떤 브라우저도 이해할 수 있는 문법으로 변환해준다.
jest는 기본적으로 ES6의 최신 기능을 모두 지원하는 안정적인 테스트 프레임워크이다.
app의 테스트 코드는 ES6 문법으로 작성되어 있기 때문에, 해당 코드를 node 환경에서 실행하려면 CommonJS 문법으로 변환해 주어야 한다.
또한 기본적으로 @quasar/babel-preset-app에 babel-preset이 내장되어 있기 때문에, @quasar/babel-preset-app에 대한 preset 설정만 해주면 된다.

	// babel.config.js
	module.exports = {
		presets: [['@quasar/babel-preset-app', { targets: { node: 'current' }, modules: 'commonjs' }]]
	}

위 코드는 jest의 테스트 코드를 변환할 때, 모듈에 대하여 commonjs 방식으로 변환하고, 변환할 타겟을 현재 사용중인 node 환경에 맞게 구성하라는 의미를 가지고 있다.
이 설정을 통해 @company/design-system 모듈을 사용할 때, import 구문을 올바르게 변환해 줄 것으로 기대하였다.

하지만 오류는 여전히 발생하였다.
위 오류는 테스트 코드에서 @company/design-system의 기능을 사용하는 과정에서 발생하였다.
왜냐하면 @company/design-system가 ES6 문법으로 작성되어 있는 경우, babel 설정을 해도 @company/design-system 패키지 내부의 코드를 CommonJS로 변환시켜주지 않기 때문이다.
@company/design-system 패키지는 자체적으로 karma를 통해 테스트를 하고 있으므로, app에서까지 @company/design-system 테스트를 관리할 필요성이 없다고 판단되었다.

따라서 jest.config.js에서 transform 시 해당 모듈을 무시하는 방법을 통해 문제를 해결하였다.

    // jest.config.js
    {
    	...,
    	transformIgnorePatterns: ['/node_modules/(?!(@company/design-system)/)'],
    	...
    }

Consider using the “jsdom” test environment. 에러

jest의 테스트 환경은 기본적으로 node이다.
하지만 vue와 같은 프론트엔드 프레임워크에서는 DOM 환경에서 테스트를 실행하는 것이 적절하다.
이에 따라 jest의 테스트 환경을 jsdom을 사용하는 환경으로 설정해주어 해결하였다.

    //jest.config.js
    module.export = {
      ...,
      testEnvironment: 'jsdom',
      ...
    }

jest.useFakeTimers().setSystemTime() is not function 에러

회사의 jest 버전은 24.9 버전이었다.
jest.useFakeTimers()의 setSystemTime() 메서드는 jest 24 버전에서도 사용할 수 있는 기능이나, jest-lagacy 패키지에 포함되어 있어 해당 패키지를 설치해야만 사용이 가능했다.
jest 27버전 부터는 useFakeTimers()기능(@sinonjs/fake-timers 패키지)가 jest 자체에 내장되어 있으므로, package.json의 버전 업데이트를 최소화 하면서 해당 기능을 사용하기 위해 jest를 27버전으로 업그레이드 하였다.
또한 jest 27버전에 호환하는 vue-jest 버전을 설치해주어야 하는데, 기존에 설치된 vue-jest의 버전은 3.0.7로, 2년 전부터 업데이트되고 있지 않았다.

따라서 vue에서 jest 27버전을 지원할 수 있는 @vue/vue2-jest 27버전을 설치하여 해결하였다.

    // package.json
    "devDependencies": {
    	...,
    	"@vue/vue2-jest": "^27.0.0",
    	"jest": "^27.0.0",
    }

    // jest.config.js
    ...
    transform: {
    	...,
    	'.*\\.(vue)$': '@vue/vue2-jest'
    }
    ...

babel-jest는 27.2.1 버전으로 설치되어 있고, jest 27버전 및 @vue/vue2-jest와 호환되는 버전이므로 변경없이 그대로 유지하였다.

(부족함이 많습니다. 피드백을 환영합니다!)