jest + msw 2 + rtk query 환경 셋팅 에러 모음

들어가기

환경

node 20.16

 

패키지 의존성

react testing library 13.4.0

redux toolkit 1.9.5 

msw 2.3 

vite 5.2.11

typescript 4.9.4

jest 29.3.1

 

msw 핸들러로 서버 응답 모킹, RTK Query로 API 호출하는 컴포넌트에서 발생하는 에러 모음zip... 

테스트로 코드 품질을 향상시키고자 했으나 jest testing framework + msw 2 환경에서 셋팅하다가  정신 건강에 위협을 받았다

msw 에서도 웃긴게 이렇게 셋팅하는게 귀찮으면 ~ 더 모던한 테스팅 프레임워크 사용하렴~ 이라고 권장..

If you find this setup cumbersome, consider migrating to a modern testing framework, like Vitest, which has none of the Node.js globals issues and provides native ESM support out of the box.

 

그치만 이번에 셋팅하면서 node에 대해서도 지식을 확장한 느낌이다. 

어마하게 셋팅에 힘을 들였기에 기록해보는 에러 모음 시작 

 

1. Cannot find module ‘msw/node’ (JSDOM)

참고

 

2. Request/Response/TextEncoder is not defined (Jest)

참고

 

TO-BE

//jest.polyfills.js

// jest.polyfills.js
/**
 * @note The block below contains polyfills for Node.js globals
 * required for Jest to function when running JSDOM tests.
 * These HAVE to be require's and HAVE to be in this exact
 * order, since "undici" depends on the "TextEncoder" global API.
 *
 * Consider migrating to a more modern test runner if
 * you don't want to deal with this.
 */
 
const { TextDecoder, TextEncoder } = require('node:util')
 
Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
})
 
const { Blob, File } = require('node:buffer')
const { fetch, Headers, FormData, Request, Response } = require('undici')
 
Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
})

 

//jest.config.js

// jest.config.js
module.exports = {
  setupFiles: ['./jest.polyfills.js'],
}

 

해당 문서대로 fetch를 polyfill해주는 `undici` 라이브러리 설치도 완료!

 

3. ReferenceError: require is not defined 

 

하지만 위에처럼 공식문서대로 그대로 적어준 `jest.polyfills.js` 파일에서 에러 발생

stackover flow에서 참고 하여 .cjs 파일로 변경

 

AS-IS

//jest.polyfills.js

//package.json 에 원래 되어있는 설정

{
  "type": "module"
}

 

module로 되어있으므로 ECMAScript module(ESM)에 따라 `.js` 파일은 ESM으로 파싱된다.

module 모드에서 CommonJS를 import 해오려면 `.cjs` 확장자로 변경하면 된다. 

 

TO-BE

//jest.polyfills.cjs

 

eslint 오류가 나는데 intellisense로 /* eslint-disable import/order */ 를 맨 윗줄에 적어준다. 

 

4. ReferenceError: ReadableStream is not defined, ReferenceError: TransformStream is not defined

참고

 

 

TO-BE

//jest.polyfills.cjs

const { ReadableStream, TransformStream } = require('node:stream/web'); //<--

Object.defineProperties(globalThis, {
  ReadableStream: { value: ReadableStream }, //<--
  TransformStream: { value: TransformStream }, //<--
})

 

주의!

ReadableStream은 require('node:util') 모듈이 아닌 require('node:stream/web') 모듈에서 가져오도록 주의!

처음에 node:util로 적어뒀다가 나중에 여기서 또 에러가 났다. 

 

5. ReferenceError: clearImmediate is not defined 

참고

 

TO-BE

//jest.polyfills.cjs

const { TextDecoder, TextEncoder } = require('node:util')
const { clearImmediate } = require('node:timers') //<--

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
  clearImmediate: {value: clearImmediate}, //<--
})

 

6. TypeError: markResourceTiming is not a function

 참고

 

TO-BE

//jest.polyfills.cjs

const { performance } = require("node:perf_hooks"); //<--
const { TextDecoder, TextEncoder } = require('node:util')
const { ReadableStream, TransformStream } = require('node:stream/web');

const {clearImmediate} = require('node:timers')

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
  ReadableStream: { value: ReadableStream },
  TransformStream: { value: TransformStream },
  performance: { value: performance }, //<--
  clearImmediate: {value: clearImmediate},
})

 

7. intercepted a request without a matching request handler 디버깅 과정

 

테스트하는 Email 페이지에 msw 핸들러의 서버 응답을 받아오는 코드가 있는데, 아무리 테스트를 돌려도 계속 테스트가 실패했다. 

서버에서 응답을 받아온 결과에 따라 화면에 동적으로 표시해야하는 텍스트를 테스트하는데 계속 요소를 못찾는다는 에러발생 

Unable to find an element with the text: /이미 사용 중/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

 

//Email.tsx

  const [
    checkEmailDuplicationQuery,
    { isLoading: isLoadingCheckEmailDuplication },
  ] = useLazyCheckEmailDuplicationQuery(); //rtk query 

  const [serverErrorMsg, setServerErrorMsg] = useState('');
   
  const handleClickVerifyEmail = () => {
    checkEmailDuplicationQuery(emailInputValue)
      .then((res) => {
        console.log('API response:', res);
        if (res.data === 'true') {
          showEmailInputErrorMsgWithFocus();
          setServerErrorMsg(
            '이미 사용 중인 이메일이에요. 다른 이메일로 시도해 주세요.',
          );
        }
      .catch((err) => console.log(err));
  };

 

 

아래처럼 해당 request를 콘솔로 찍으면 잘 찍힌다.

 

//Email.test.tsx

  it('이미 사용중인 이메일이면 다른 이메일로 시도하라는 에러메시지 표출된다', async () => {
    const { user } = renderEmail();
    server.events.on('request:start', ({ request }) => {
      console.log('MSW intercepted: 콘솔', request.method, request.url);
    });
  });

 

 

그런데 아래와 같이 테스트 코드를 추가하면 계속 실패하고 콘솔에는 intercepted a request without a matching request handler 

자꾸 핸들러와 일치하는 요청이 없다고 나온다. 

 

//Email.test.tsx

  it('이미 사용중인 이메일이면 다른 이메일로 시도하라는 에러메시지 표출된다', async () => {
    const { user } = renderEmail();

    const emailInput = screen.getByLabelText('이메일');
    await user.type(emailInput, 'test@test.com');

    const confirmBtn = screen.getByRole('button', { name: '확인' });
    await user.click(confirmBtn);
    expect(await screen.findByText(/이미 사용 중/)).toBeInTheDocument();
  });

 

 

//emailHandler.ts

  //회원가입 요청시 이메일주소 중복 여부
  http.get('/sign-ups/email-duplications', ({ request }) => {
    console.log('Mock handler called');
  }

 

• 컴포넌트 구현부에서 console로 디버깅해보니, api 응답이 성공하지 않고 에러로 FETCH_ERROR 상태가 들어오는 것을 볼 수 있다. 
• handler가 실행되는지 콘솔 찍었으나 테스트 터미널에서 찍히지 않는다. = handler 호출 안됨 

위 문제는 RTK Query의 API 요청이 intercepted 되지 않고 있는 것이다. 

 

msw 문서 RTK Query requests are not intercepted 에서 `baseUrl`을 설정하라고 한다. 

공식문서에서 이슈로 걸어준 redux toolkit의 maintainer의 답변을 보니, 노드는 기본적으로 도메인이 없어서 상대 경로로 요청하면 노드에서는 작동하지 않는다고 한다.

그래서 브라우저에서 테스트를 돌리는게 아니라면 full url이 항상 필요하다.

즉, RTK Query를 사용해서 API를 호출할 때 요청을 테스트 환경에서 MSW v2가 intercept 하려면 msw의 핸들러를 절대 경로로 적어주어야 한다!

 

눈으로 확인을 위해 document.baseURI 를 찍어보면, 아래와 같이 `localhost/` 까지만 나온다. 

 

//setupTests.ts 

TO-BE

// Set `document.baseURI` for MSW v2
Object.defineProperty(document, 'baseURI', {
  value: 'http://localhost:5173',
  writable: true,
});

 

위 코드와 같이 baseURI를 설정하고, 콘솔로 찍어보면 이제 기본 vite 환경변수로 설정해둔 `localhost:5173`으로 잘 찍히는 걸 볼 수 있다. 

 

 

 

8. TypeError: Right-hand side of 'instanceof' is not an object

참고

이제 테스트를 다시 돌려보니, 드디어 mock handler는 실행되나, 또 에러 발생

 

 

ReadableStream을 node:util 모듈이 아닌 node:stream/web에서 가져오면 해결된다. 

처음에 ReferenceError: ReadableStream is not defined  에러 해결할때 이슈 스레드 잘 안보고 맨 위에있는 코드였던 node:util에서 가져왔더니 이런 right-hand 어쩌고 에러가 나는 것이었다. 

 

//jest.polyfills.cjs

AS-IS

const { ReadableStream } = require('node:util') //X

Object.defineProperties(globalThis, {
  ReadableStream: { value: ReadableStream }, //<--
})

 

TO-BE

const { ReadableStream } = require('node:stream/web');

 

이렇게 셋팅하면 테스트 통과이다!