[Test Code] Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

원인

Error: Not implemented: HTMLCanvasElement.prototype.getContext 오류는 테스트 환경에서 getContext 메서드가 구현되지 않았을 때 발생합니다.

이 오류는 대개 테스트 환경에서 캔버스와 관련된 기능을 사용할 때 발생하는데, 테스트 코드에서 실제로 캔버스를 사용하려는 것이 아니라면 이 오류를 해결하는 방법이 있습니다.

😒궁금증

context 라는 것이 react의 context를 의미하는 것인가?

• HTMLCanvasElement.prototype.getContext 메서드의 "context"를 의미
• HTMLCanvasElement.prototype.getContext 메서드는 HTML 캔버스 요소의 그리기 컨텍스트를 가져오는 메서드
• 이 메서드는 캔버스 요소의 컨텍스트 타입에 따라 다양한 값을 반환.
• React의 컨텍스트와는 직접적인 연관성이 없음

 

해결 방법

1. 의존성 주입

yarn add --dev jest-canvas-mock

2. jest.config.js에 셋업 설정 (setupFilesAfterEnv)

module.exports = {
  testURL: 'http://localhost/',
  testEnvironment: 'jsdom',
  transform: {
    '\\.[jt]sx?$': 'ts-jest',
  },
  setupFilesAfterEnv: ['jest-canvas-mock', '@babel/register'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/.erb/mocks/fileMock.js',
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
    electron: '<rootDir>/.erb/mocks/electronMock.js',
  },
  transformIgnorePatterns: [
    // '/node_modules/(?!(react-markdown|vfile|unist-util-stringify-position|unified|bail))',
  ],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json'],
  moduleDirectories: ['node_modules', 'release/app/node_modules'],
  testPathIgnorePatterns: ['release/app/dist'],
  setupFiles: ['./.erb/scripts/check-build-exists.ts', './test-setup.js'],
};

 

그럼에도 오류가 난다면,

import 'jest-canvas-mock';

오류가 나는 페이지에 해당 코드를 import하면 해결된다!