Jest로 웹 작업자를 테스트하는 방법

Alex의 기사Use Web Workers in your Vue.js Components for Max Performance에서 읽을 수 있듯이 웹 작업자를 사용하여 UI를 차단하는 메인 스레드에서 무거운 작업을 실행하는 대신 Vue.js 앱의 성능을 최대화할 수 있습니다. 그러나 Web Workers를 어떻게 테스트할 수 있습니까? Webpack 번들 웹 워커는 Jest에서 지원하지 않으므로 테스트하기 위해 워커를 조롱해야 합니다! 피보나치 수를 계산하기 위해 간단한 Vue 앱에서 시작하여 간단한 3단계로 수행하는 방법을 살펴보겠습니다. 여기서 fibonacci 함수는 웹 작업자가 수행하는 무거운 작업입니다(코드 here를 따를 수 있음).



우선 작업자의 주요 기능을 분리해야 합니다. 이 경우에는 fibonacci 함수( src/fibonacci.js )이기 때문에 매우 간단합니다.

let fibonacci = (num) => {
  if (num <= 1) return 1;
  return fibonacci(num - 1) + fibonacci(num - 2);
}

export default fibonacci

작업자를 최소한으로 유지합니다( src/fibonacci.worker.js ):

import fibonacci from "./fibonacci";

self.onmessage = async function (e) {
  self.postMessage(fibonacci(e.data));
};

이렇게 하면 구현의 웹 작업자 부분만 조롱할 수 있습니다( src/__mocks__/fibonacci.worker.js ).

import fibonacci from "../fibonacci";

export default class fibonacciWorker {
  constructor() {
    // Note that `onmessage` should be overwritten by the code using the worker.
    this.onmessage = () => { };
  }

  postMessage(data) {
    this.onmessage({ data: fibonacci(data) });
  }
}

주요 기능을 쉽게 테스트

import { shallowMount } from '@vue/test-utils'
import App from '@/App.vue'

jest.mock("@/fibonacci.worker")

describe('Fibonacci App.vue', () => {
  it('should calculate Fibonacci number', async () => {
    const wrapper = shallowMount(App)
    await wrapper.find('input').setValue('10')
    await wrapper.find('button').trigger('click')
    expect(wrapper.find('.result').element.innerHTML).toBe('Result: 89')
  })
})

모든 작업자가 한 번에 조롱되도록 이 솔루션을 일반화하기 위해 workerloader-jest-transformer를 만들었습니다. 이 Jest 변환기는 Jest에서 Webpack 작업자-로더 모듈로 로드된 웹 작업자를 테스트하는 데 도움이 됩니다. 사용하기 쉽습니다.

yarn add workerloader-jest-transformer --dev

변환 규칙을 Jest 구성에 추가하십시오.

transform: {
  "^.+\\.worker.[t|j]sx?$": "workerloader-jest-transformer"
}

이 변환기는 jsdom-worker에서 영감을 받아 JSDOM용 Web Worker API를 구현하므로 here에서 볼 수 있듯이 모의 코드를 제거할 수 있습니다.

Workerloader-jest-transformer는 매우 실험적이며 코드는 Github에서 사용할 수 있습니다. 모든 기여와 조언은 대단히 감사하겠습니다!