Chrome 확장 프로그램 단위 테스트

단위 테스트를 사용하면 코드의 작은 섹션을 나머지 확장 프로그램과 별개로, 브라우저 외부에서 테스트할 수 있습니다. 예를 들어 도우미 메서드가 저장소에 값을 올바르게 작성하는지 확인하는 단위 테스트를 작성할 수 있습니다.

확장 API를 사용하지 않고 작성된 코드는 Jest입니다. 이러한 방식으로 코드를 더 쉽게 테스트하려면 다음과 같은 기법을 사용해 보세요. Chrome에서 종속 항목을 삭제하는 데 도움이 되는 종속 항목 삽입 네임스페이스를 지정할 수 있습니다.

확장 프로그램 API가 포함된 코드를 테스트해야 하는 경우 모의 API를 사용하는 것이 좋습니다.

예: Jest와 함께 모의 사용

모든 테스트 전에 실행될 설정 파일을 선언하는 jest.config.js 파일을 만듭니다.

jest.config.js:

module.exports = {
  setupFiles: ['<rootDir>/mock-extension-apis.js']
};

mock-extension-apis.js에서 호출할 것으로 예상되는 특정 함수의 구현을 추가합니다.

mock-extension-apis.js:

global.chrome = {
  tabs: {
    query: async () => { throw new Error("Unimplemented.") };
  }
};

그런 다음 jest.spy를 사용하여 테스트에서 반환 값을 모의 처리합니다.

test("getActiveTabId returns active tab ID", async () => {
  jest.spyOn(chrome.tabs, "query").mockResolvedValue([{
    id: 3,
    active: true,
    currentWindow: true
  }]);
  expect(await getActiveTabId()).toBe(3);
});

다음 단계

확장 프로그램이 예상대로 작동하는지 확인하려면 엔드 투 엔드 테스트를 추가하는 것이 좋습니다. 전체 가이드는 Puppeteer로 Chrome 확장 프로그램 테스트를 참조하세요.