Trouble Shooting 모음

Wanted-PreOnboarding-Team-8 / pre-onboarding-9th-4-8

원티드 프리온보딩 4차 과제

https://pre-onboarding-9th-4-8.netlify.app

0 stars 8 forks source link

Trouble Shooting 모음 #26

Open jiheon788 opened 1 year ago

jiheon788 commented 1 year ago

테스트 과정 중 생긴 문제상황, 원인, 해결방안, 레퍼런스를 Comment로 남겨주세요🙆‍♂️🙆‍♀️

jiheon788 commented 1 year ago

문제 상황

msw 테스트 환경에서 작동불가

원인

Mock Service Worker는 브라우저에서 작동하지만, 테스트는 노드 환경에서 작동

해결방안

테스트 모드에서는 서버로 가동해줘야함

// mocks/server.ts
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

// App.tsx
import ...

if (process.env.NODE_ENV === 'test') {
  (async () => {
    const { server } = await import('@/mocks/server');
    server.listen();
  })();
} else if (IS_MOCK) {
  (async () => {
    const { worker } = await import('@/mocks/browser');
    worker.start();
  })();
}

const App = () => {
  ....
}

// src/setupTest.ts
import '@testing-library/jest-dom';
import { server } from '@/mocks/server';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

레퍼런스

MSW로 API 모킹하기

raw20 commented 1 year ago

문제 상황

AdminPage 컴포넌트 랜더링 테스트 중 screen.debug()를 찍으면

<body>
     <div />
</body>

요소들이 다 날라간채 debug 출력

원인

AdminPage 컴포넌트가 로딩되기 전에 테스트를 실행

해결방안

await를 처리 후 findByText를 사용하여 요소 안에 있는 텍스트를 갖고옴

describe('AdminPage 랜더링', () => {
  it('...', async () => {
    render(
      <BrowserRouter>
        <ChakraProvider theme={theme}>
          <QueryClientProvider client={queryClient}>
            <Suspense fallback="loading...">
              <TableController />
            </Suspense>
          </QueryClientProvider>
        </ChakraProvider>
      </BrowserRouter>,
    );
   ...
    const completeBtn = await screen.findByText('...');
    fireEvent.click(completeBtn);

   ...
});

tnghgks commented 1 year ago

문제 상황

초기 테스트 환경 세팅 시 문제 발생

Test 파일에서 컴포넌트 render 시 모듈 경로를 못찾는 에러

원인

craco를 통한 import 시 절대경로 변경으로 모듈을 찾을 수 없는 원인

해결방안

craco.config.js에 jest config를 추가해줌

module.exports = { reactScriptsVersion: 'react-scripts', webpack: { alias: { '@': path.resolve(__dirname, 'src'), }, plugins: [new TsconfigPathsPlugin({ configFile: tsConfigPath })], }, jest: {
configure:{ moduleNameMapper: { // 이부분 추가 "^@/(.*)$": "/src/$1", }, } } };


2. package.json과 같은 depth에 jest.config.js 파일 생성 이 경우 package.json script 수정 필요 `"test" : "jest --watch"`
```js
module.exports = {
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

jhoon9494 commented 1 year ago

문제상황

테스트는 정상적으로 동작하나 아래 사진과 같은 에러메세지가 계속 발생

원인

클릭 등의 이벤트를 통해 비동기적으로 컴포넌트를 업데이트 시킨 후, 구성 요소가 모두 렌더링 또는 업데이트되기 전에 테스트가 조기에 종료되어 발생함.

해결 방안

모든 렌더링 및 업데이트가 완료된 후 테스트를 종료시켜야 함. 비동기적으로 컴포넌트를 업데이트 시키는 코드 이후에 아래 코드를 작성하여 렌더링이 종료된 다음 테스트를 종료시킴.

await waitForElementToBeRemoved(() => screen.queryByText('loading...'));

참고자료