리엑트 프론트앤드 테스트
프론트엔드의 테스트를 jest로 작성해 봤다.
리엑트에서 jest를 사용하기 위해서는 mock를 해주어야 한다.
라우터의 Link 기능은 라우터 선언한 내에서만 사용할 수 있기 때문에 test 파일에서는 사용할 수 없다는 오류가 발생한다.
따라서 mock로 기능을 사용할 수 있게 선언해야 한다.
describe는 test들을 한군데 묶어서 관리할 수 있게 한다.
describe에 두개의 test를 작성한 뒤 로그인 화면에 대한 테스트를 진행했다.
위쪽에는 첫번째 test를 나타낸 것이다.
render를 사용하고 BrowserRouter를 설정해 라우터에 접근할 수 있게 한다.
screen에서 텍스트가 보여질 때 "Log in" 텍스트를 getByText가 접근하여 감지할 수 있게 하였다.
결과로서 기대하는 것에 대한 코드는 expect로 나타낸다.
toBeInTheDocument는 해당 항목이 브라우저에 보이길 바란다는 뜻이다.
이미 있는 유저가 로그인 될 수 있는지에 대한 test다.
주어진 상황에서(given), 행동을 했을 때(when), 결과가 나타나는 것을(then) 분리하여 작성하였다.
각 input에 data-testid를 추가해서 getByTestId를 호출할 수 있게 하였다.
<h1>으로 작성한 경우 getByRole의 heading으로 호출할 수 있다.
보통 h1은 큰 제목으로, 하나만 들어가는 경우가 많으니 라우터 이동을 getByRole으로 알아차리는데 사용할 수 있을 것 같다.
전체 코드는 아래와 같다.
jest 초기 세팅 중 발생한 오류
오류 1번
랜더링을 확인하기 위한 Jsx 자체를 부르지 못하는 오류다.
시도 1. tsconfig.app.json에서 'jsx': 'react-tsx'에서 'react'로 변경
변함이 없었다.
시도 2. jest.setup.ts에 module.exports 에서 moduleFileExtension을 추가
변함이 없었다.
시도3. 타입스크립트에서 tsx를 다루기 위한 모듈 설정 변경
https://www.dhiwise.com/post/fixing-the-error-jest-support-for-the-experimental-syntax-jsx
Fix 'Jest Support for the Experimental Syntax JSX’
Learn how to fix "jest support for the experimental syntax jsx isn't currently enabled" error.
www.dhiwise.com
변함이 없었다.
(해결) 시도4. tsconfig.json에서 jsx 설정을 바꾸었다.
https://student513.tistory.com/82
'React' refers to a UMD global, but the current file is a module
Introducing the New JSX Transform – React Blog Although React 17 doesn’t contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What’s a JSX Transform? Browse
student513.tistory.com
오류가 사라졌다!
오류 2번
toBeIntheDocument가 존재하지 않는다는 오류가 발생했다.
테스트가 통과된 후에 아무것도 건드리지 않았는데도 다시 오류가 발생했다.
타입이 잘 열결되지 않은 경우 발생할 수 있는 오류라고 한다.
타입스크립트와 jest의 타입이 안 맞아서 생기는 오류다.
그래서 include로 타입을 포함시키려 했다.
그러나 다시 오류가 발생했다.
놀랍게도 테스트는 통과가 되는 상태였다.
일단 include를 지우고 계속 하기로 했다.
jest는 이곳을 참고해서 작성했다.
jest 자체도 어렵지만.. 정말 많은 충돌과 오류가 발생했으며.. 아직 찾아가는 중이다.
https://nabendu82.medium.com/react-testing-with-jest-and-rtl-in-typescript-a8d62f7570ff
React Testing with Jest and RTL in TypeScript
In this post we are going to learn to test a React app. Here, we are going to use Jest and React Testing Library(RTL). Both of these are…
nabendu82.medium.com
Property ‘toBeInTheDocument’ does not exist on type ‘Matchers<any>’
React + Typescript의 개발 환경에서 Jest + testing-library/react를 이용하여 테스트를 작성할 때, expect 단언에서 Matcher 메서드를 체이닝하면서 위와 같은 오류를 마주칠 수 있다.
medium.com
Property 'toBeInTheDocument' does not exist on type 'Matchers<any>'
I'm trying to write tests for my simple React App that creates a UI for a dog Shelter using API etc. I have imported the modules shown below and ran the following command npm install jest-dom react-
stackoverflow.com