Form 테스팅

구체적으로 어떤 부분을 테스트할 수 있는가?

• 유효성 검사
• 올바른 값을 입력했을 때 오류 메시지가 NO_ERROR(’’)로 초기화 되는가?
• 잘못된 값을 입력했을 때 오류 메시지가 올바르게 갱신되는가?
• 폼이 제출되거나, 필드가 터치된 경우에만 메시지가 표시되는가?

• 폼 제출
• 유효성 검사에 실패했을 때, antd의 메시지가 올바르게 표시되는가?
• 폼이 제출되고 유효성 검사를 통과했을 때, submitData에 올바른 값이 들어있는가?
• formData로 변환 후
• ‘data’ 필드에 올바른 데이터가 들어있는가?
빈 데이터는 없는가? 각 필드의 타입은 올바른가?
• ‘files’ 필드에 올바른 파일 데이터가 들어있는가?

• 세션 스토리지 저장
• 입력이 발생하면 1초 후 세션 스토리지에 올바르게 저장되는가?
• 사용자가 모달에서 아니오를 누르거나, 수정 페이지에 진입하거나,
전시회 정보가 이미 존재하는 경우, 세션 스토리지기 자동으로 비워지는가?

• 전시회 검색바
• 검색 시 올바른 데이터를 배열로 가져오는가?
• 잘못된 값을 입력 시, antd의 message가 보이는가?

• API 테스트

1. 각 입력 필드는 화면에 렌더링되어야 한다. o

2. 입력 시 값이 올바르게 반영되어야 한다. o

3. 잘못된 값을 입력 시, 오류 메시지가 보여야 한다. (유효성 검사)

4. 유효성 검사에 미통과한 상태에서 폼을 제출 시, 오류 메시지가 보여야 한다.

5. 유효성 검사에 통과한 상태에서 폼을 제출 시, 데이터가 올바르게 제출되어야 한다. (API 모킹 예정)

테스트 종류, 도구

• 유닛 테스트(컴포넌트 테스트), integrate 테스트, E2E 테스트

• 도구: React Testing Library, testing-library/user-event, Jest

참고 자료

React Testing Library를 이용한 선언적이고 확장 가능한 테스트

원문: https://javascript.plainenglish.io/declarative-and-scalable-testing-with-react-testing-library-177f35f41396 무죄가 입증될 때까지 모든 코드는 유죄다 - 누군가 솔직히 React 컴포넌트 테스트를 작성하는 건 아마도 당신이 제일 좋아하는 일이 아닐 것이다. 번거롭고 어렵고 성가신 것으로 느껴질 수 있다. 때로는 무엇을 테스트해야 할지, 심지어는 컴포넌트를 테스트하는 방법도 모른다. 하지만 실제로 테스트는 애플리케이션의 무결성에 매우 중요하며 올바로 실행되면 당신이 의도한 대로 애플리케이션이 동작한다는 확신을 줄 수 있다.

https://ui.toast.com/weekly-pick/ko_20210630

[번역] 초보자를 위한 React 어플리케이션 테스트 심층 가이드 (1)

with @testing-library/react 이 글은 " An in-depth beginner's guide to testing React applications "를 번역한 글입니다 대부분의 개발자는 다음의 사실을 알고 있다: 자동화된 테스트는 중요하다. 그렇게 주장하는 데는 많은 이유가 있다. 단지 코드 몇 줄을 바꾸는 것으로 자기도 모르게 앱을 망가뜨릴 수도 있다. 코드를 수정한 후에 테스트를 수동으로 돌리는 일은 성가시다.

https://blog.rhostem.com/posts/2020-10-14-beginners-guide-to-testing-react-1#test_if_the_correct_page_was_rendered

[react-testing-library] 테스트 코드 작성 시 Tip

🎯 테스트 코드 작성 시 Tip 테스트 코드를 3가지 관점으로 작성하면 쉽게 작성할 수 있다. 📝 Three "A"s test("renders Changed! if the button was clicked", () => { // Arrange render( ); // Act const b..

https://lakelouise.tistory.com/338?category=1049390

(번역) Jest, React 및 Typescript를 사용한 단위 테스트

원문: Unit testing with Jest, React, and TypeScript 소프트웨어 테스트(Software Testing)은 소프트웨어 애플리케이션이나 제품이 의도된 대로 작동하는지 평가하고 확인하는 과정입니다. 테스팅을 통해 버그 방지, 개발 비용 절감, 성능 향상 등에 장점을 얻을 수 있습니다. 소프트웨어 개발자로서 최종 사용자를 염두에 두고 테스트를 실행하고, 사용자가 사용하는 것과 동일한 방식으로 애플리케이션을 테스트 함으로써 프로그램이 실패할 가능성을 낮추는 것은 중요합니다.

https://ykss.netlify.app/translation/unit-testing-with-jest-react-and-typescript/

JEST 사용법

JS 테스트 프레임워크이다. 내가 작성한 코드가 제대로 동작하는지 확인할 때 사용한다. 여러가지 상황들을 설정하고, 그 상황에 맞는 결과가 나오는지 자동으로 테스트 해준다. 프로젝트 규모가 커질수록 테스트해야 할 양이 많아지는데 그럴때 Jest를 사용한다. 그렇다면 왜 Jest를 선택하였나? Jest 이전에는 여러 테스트 라이브러리를 섞어서 사용했다고 한다.

https://velog.io/@seongkyun/JEST-%EC%82%AC%EC%9A%A9%EB%B2%95#41-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95

[Next.js] 테스트

이번 블로그 포스트에서는 TypeScript를 기반으로 하는 Next.js 프로젝트에서 Jest와 React Testing Library 를 사용할 수 있는 테스트 환경을 구성하는 방법과, 구성된 환경에서 테스트 코드를 작성하는 방법에 대해서 알아보겠습니다. 여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다. 이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Next.js 의 시리즈 리스트입니다.

https://dev-yakuza.posstree.com/ko/react/nextjs/test/

Next.js TypeScript 환경에서 Jest 초기 설정

create next app(CNA)에 typescript 옵션을 붙여 프로젝트를 생성한 후 Jest를 설정하는 방법입니다. CNA 을 사용할 경우 Jest 세팅이 되어 있지 않기 때문에 별도로 세팅을 해 주어야 합니다. 공식 문서 링크 테스트에 필요한 파일들을 설치합니다. $ yarn add -D @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event babel-jest jest jest-dom node-mocks-http ts-jest ts-loader 각 패키지의 기능은 다음과 같습니다.

https://yoonho-devlog.tistory.com/175

getByRole 참고자료

Using ARIA: Roles, states, and properties - Accessibility | MDN

ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element).

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles

이슈

jest 및 react-testing-library가 인식 불가

• 가능: react-hook, custom-hook, Emotion, useRouter, useTheme

• 불가능: useLocation

window.matchmedia 타입 에러

Next.js에서 Testing 세팅하기

Next.js에서 Test 세팅을 진행해봅시다.

https://www.rldnrl.dev/blog/next-testing-setting

규칙