[React] React에서 Plotly.js 테스팅시 다양한 error

'TypeError: window.URL.createObjectURL is not a function'

 

URL.createObjectURL()

이 메소드를 알기 전에 먼저 Blob 객체부터 알아야 한다.

Blob

• Blob은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다.
• Blob 객체를 통해 데이터의 크기 및 MIME 타입을 알아내는 등의 작업을 할 수 있다.
• Blob 객체를 url로 만들 때 URL. createObjectURL 메소드를 사용한다.
• URL. createObjectURL()메소드는 Blob 객체를 나타내는 URL을 포한한 다음과 같은 DOMString을 생성한다.
• (blob: URL)

 

문제 발생

jest로 react testing 중 Plotly.js 차트를 사용한 컴포넌트가 렌더링 됐을 때 발생

 

해결 과정

jest 에서 URL.createObjectURL() 메소드를 지원하지 않는다는 것 같다.

setupTests.ts에서 메소드를 전역적으로 mock 처리 해주었다.

 

해결

window.URL.createObjectURL = jest.fn();

Plotly.js를 import한 컴포넌트가 렌더링 되었을 때 window.URL.createObjectURL를 mock 처리 한 것으로 해결 되었다.

---

'Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)'

문제 발생

jest로 react testing 중 Plotly.js 차트를 사용한 컴포넌트가 렌더링 됐을 때 발생.

consle.error이다.

 

해결 과정

JSDom 은 getContent메소드를 구현하지 않고,

'Error: Not implemented: HTMLCanvasElement.prototype.getContext' 에러를 던진다.
위의 메소드를 setupTests.ts에서 전역적으로 mock 처리 해주었다.

 

해결

window.HTMLCanvasElement.prototype.getContext = jest.fn();

---

'Error: Uncaught [TypeError: window.ResizeObserver is not a constructor]'

문제 발생

위의 에러들을 차례대로 해결해주고 나니까 마지막으로 이 에러가 출력 됐다.

 

해결 과정

에러 그대로 window.ResizeObserver 생성자를 mock함수로 만들고 내부 메소드들을 하나씩 mocking 했다.

 

해결

beforeEach(() => {
  window.ResizeObserver = jest.fn().mockImplementation(() => ({
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn()
  }));
});

afterEach(() => {
  window.ResizeObserver = ResizeObserver;
  jest.restoreAllMocks();
});