[메가테라 FE 생존코스] 5주차 회고

3L 회고

👍 Liked

• 드디어 테스트 코드를 작성하는 강의를 수강해서 기대반 걱정반이지만 기분은 좋다.
• 단위테스트는 Jest, 컴포넌트 테스트는 React-Testing-Library, 네트워크 테스트는 MSW 각 상황별로 테스트 라이브러리를 배울 수 있어서 좋았다.
  • 컴포넌트 테스트 라이브러리로 Storybook을 사용했었는데, 스토리북은 사용자가 직접 눈으로 보면서 해당 컴포넌트 조작 방법도 동작해보면서 사용할 때 편리한 것 같다.
  • React-Testing-Library는 컴포넌트가 의도한 대로 작동하는지 테스트 하기위해 미리 테스트 코드를 작성해 둠으로써 추후에 유지보수성을 높이는 데 장점이 있어 두가지를 적절히 사용하면 좋을 것 같다.
• 그동안 QA를 진행하기 위해 직접 시나리오대로 진행했다면, 앞으로는 Playwright를 통해서 자동화 E2E 테스트를 할 수 있음에 기쁘다.

📘 Learned

• BDD(Behavior-Driven-Development) 스타일로 테스트 코드를 작성하는 방법을 배웠다.
  • 인간친화적으로 가독성 좋은 테스트 코드를 작성하여 유지보수성을 높일 수 있다는 장점이 있다.
• MSW(Mock Service Worker)를 사용하여 오프라인 환경에서 네트워크 테스트를 하는 방법을 배웠다.
  • 어떻게 오프라인 환경에서 가능한지는 Service Worker API를 기반으로 브라우저와 네트워크 사이에 프록시 서버를 띄워서 테스트를 할 수 있다.
• 자동화 E2E(Ent to End) 테스트 라이브러리로 Playwright, CodeceptJS를 배웠다.

Playwright는 좀 더 구체적인 테스트를 작성할 때 용이하고 개발자 친화적이다.

test('Filter products', async ({ page }) => {
  await page.goto('/'); // root 경로로 이동해라

  await expect(page.getByText('Apple')).toBeVisible(); // 'Apple' 이 보이는가?

  const searchInput = page.getByLabel('Search'); // Search 라벨을 가진 input을 선택해라

  await searchInput.fill('a'); // input에 'a'를 채워라

  await expect(page.getByText('Apple')).toBeVisible(); // 'Apple' 이 보이는가?

  await searchInput.fill('aa'); // input에 'aa'를 채워라

  await expect(page.getByText('Apple')).toBeHidden(); // 'Apple' 이 안보이는가?
});

 

반면, CodeceptJS는 인간친화적으로 작성할 수 있어 개발자뿐만 아니라 다른 직군과 소통할 때도 유용할 것 같다.

Feature('Google');

Scenario('Search “CodeceptJS”', ({ I }) => {
  I.amOnPage('<https://www.google.com/ncr>');
  I.fillField('[name="q"]', 'CodeceptJS');
  I.click('Google Search');
  I.see('codecept.io');
});

 

😅 Lacked

• 이번주는 야근이 많아 몸이 피곤해서 공부에 집중을 많이 못해서 아쉽다.
• 강의를 들을 땐 잘 이해되지만 직접 테스트 코드를 작성하려하니 연습이 안되어 있어서 막막해서 아쉬웠다.

느낀점

이번주는 회사 솔루션을 전시회에서 보여주는데 갑자기 시나리오가 추가되고, 대응할 사항들이 생겨서 야근을 많이한 주였다.

그래서 공부에 집중을 제대로 못했지만, 앞으로 테스트 코드를 작성하는 훈련을 통해 설계부터 탄탄하고 유지보수성이 좋은 코드를 작성하도록 꾸준히 공부해나가야겠다.