첫 번째 반응 테스트 적으세요.

표지 사진은 상관없어. 괜찮아 보여. 그렇지?워싱턴 주 시애틀 탐색 공원.
본고는 독자가 React의 기본 지식에 대해 잘 이해한다고 가정한다.그것 또한 일부 인코딩과 관련될 것입니다. 함께 인코딩하는 것을 환영합니다.초보자 코드의 저장소HERE를 찾을 수 있습니다.테스트가 있는 최종 품목을 보려면 동일한 저장소를 사용하지만 분기with-tests로 전환합니다.
어떤 변경을 진행하기 전에 코드를 훑어보는 데 시간이 좀 걸립니다.이것은 아주 간단하다. 단지 두 개의 구성 요소 & 약간의 상태만 있어 개와 비개 사이에서 그림을 교환할 수 있다.
이 메모리 라이브러리는 create-react-app로 만들어졌기 때문에 코드에 이미 테스트 도구가 있기 때문에 우리는 스스로 구축하거나 추가할 필요가 없다.

우선 setupTests.js라는 파일이 있는데 Jest 테스트 실행 프로그램의 기본 가져오기를 포함한다.이 파일은 더 복잡한 테스트를 하기 위해 장래에 편집할 수 있지만, 우리는 지금 너무 많은 일을 할 필요가 없다.
그 다음에 App.test.js 라는 파일을 볼 수 있습니다.나는 이것이 매우 미친다는 것을 알고 있지만, 이것이 바로 우리가 응용 모듈을 위해 테스트를 작성하는 곳이다.파일 확장자는 테스트를 실행하기 위해 명령을 입력할 때 (패키지 관리자에 따라 npm test 또는 yarn test 파일 확장자가 있는 모든 파일을 읽고 실행하기 때문에 매우 중요하다.
그리고 일부 코드는 .test.js 파일에 존재하기 때문에 우리는 이 코드를 사용하여 테스트의 외관에 대해 기본적인 가설을 할 수 있다.우리 가 보아도 무방하다.

import { render, screen } from '@testing-library/react'
import App from './App'

test('renders learn react link', () => {
  render(<App />)
  const linkElement = screen.getByText(/learn react/i)
  expect(linkElement).toBeInTheDocument()

})

변경하기 전에 우리가 보고 있는 내용을 분석해 봅시다.
나는 이 작은 부분에서 가장 곤혹스럽고 아마도 가장 중요한 것은 두 개의 다른 테스트 패키지를 사용했다는 것이라고 생각한다.첫 번째 소프트웨어 패키지는 React Testing Library입니다.이것은 가져오는 것이 정상과 같기 때문에 더욱 뚜렷한 가방이다.가져오는 중 App.test.js, 모든 구성 요소의 실례와 render 에 접근할 수 있도록 합니다. 이것은 설명한 구성 요소를 보여준 후에 바닐라 자바스크립트와 같은 방식으로 DOM에서 조회할 수 있도록 합니다.
두 번째 패키지는 Jest이며 테스트 실행 프로그램입니다.screen를 사용하여 프로젝트를 만들면 Jest는 즉시 사용할 수 있지만 타사 라이브러리입니다.대체 테스트 실행 프로그램이 더 적합한 기능을 제공하는 것을 발견하면 Jest를 사용할 필요가 없습니다. 그러나 이것은 가장 광범위하게 사용되고 좋은 출발점입니다.

시주자가 뭐예요?

테스트 실행자는 완전히 같지 않지만, 그들의 전체적인 목적은 테스트 파일을 읽고, 모든 테스트가 기대에 부합되는지 (단언이라고도 부른다) 에 따라 출력을 출력하는 것이다.
Jest 자체는 실행 프로그램 (테스트를 읽을 수 있다는 뜻), 단언 라이브러리 (기대치를 작성할 수 있다는 뜻), 아날로그 프로그램 (외부 기능의 가짜 복제품을 만들어서 테스트 공간에서 마구잡이로 할 수 있다는 뜻) 이다.이제 다른 풍경화를 빨리 봅시다.

Discovery Park again!! What a nice damn place to be.

좋습니다. 코드 세션으로 돌아가십시오.

import { render, screen } from '@testing-library/react'
import App from './App'

test('renders learn react link', () => {
  render(<App />)
  const linkElement = screen.getByText(/learn react/i)
  expect(linkElement).toBeInTheDocument()

})

우리는 지금 어떤 부분이 우스갯소리인지 확정할 수 있다. create-react-app 와 test (단언)
반응 테스트 라이브러리는 expect와 render를 포함한다.
네가 알고 싶은 마지막 한 가지...우리는 왜 Jest에서 가져오지 않습니까screen와test?
정답은...이 우스갯소리는 expect 파일의 전체 범위에 몰래 그 방법을 추가했다.테스트 파일에 .test.js 하나를 꺼내서 실행하면 이 공간에서 사용할 수 있는 모든 방법을 볼 수 있습니다.이것은 거대한 위안이니 주의해 주십시오.네가 곧 보게 될 일지.하지만console.log(global)과expect모두안에 있습니다.
이 점에서 계속 운행test하세요. 만약 당신이 아직 없다면.우리 프로그램에learn react 링크가 없기 때문에 최초의 테스트는 당연히 통과하지 못할 것입니다.

무엇을 테스트할지 결정하다

현재 우리는 도구yarn test가 우리에게 부여한 기능을 이해했기 때문에 어떤 테스트를 작성할지 고려할 수 있다.주로 세 가지 유형의 테스트가 있습니다.

단원 - 진공에서 방법이나 상태와 같은 단일 기능을 시험한다.

집적 - 조합에서 정상적으로 작동하는지 확인하기 위해 방법이나 구성 요소를 함께 테스트합니다.

끝에서 끝 - 사이트 사용자가 사용 가능한 모든 응용 프로그램을 테스트하기 시작하는 곳부터.

⚠ Which type of test do you think is currently being rendered in App.test.js?

나는 테스트에서 어떤 스타일을 사용해야 하는지에 대한 다른 의견을 읽은 적이 있지만, 나에게 가장 의미 있는 것은 통합 테스트를 작성하는 것이다.전반적으로 유행하는 이념은 사용자가 사용할 수 있는 방식으로 응용 프로그램을 테스트하는 것이다.우리 응용 프로그램의 기능을 봅시다.계속해서 create-react-app 를 사용하여 두 번째 터미널에서 프로그램을 시작합니다.

와, 개다.
프로그램을 실행할 때, 그림으로 개와 비개 사이를 왔다 갔다 할 수 있어야 한다.이렇게 보면, 우리는 그림을 클릭하면 이리저리 전환할 수 있도록 테스트를 작성해야 한다.어쨌든 이것이 바로 우리 사용자들이 하고 있는 일이다.

쓰기 테스트

렌더링 응용 프로그램부터 시작하겠습니다.이 부분은 우리가 바꿀 필요가 없다.

import { render } from '@testing-library/react'
import App from './App'

test('Switches image upon clicking', () => {
  render(<App />)

})

그런 다음 클릭을 시뮬레이션하기 위해 DOM에서 이미지를 가져와야 합니다.React 테스트 라이브러리에서 가져온 yarn start는 미리 귀속된 screen이기 때문에 개념적으로 vanilla JS에서 조회document.body처럼 조회할 수 있습니다screen.방법은 좀 다르지만 생각은 같다.VS 코드를 사용하는 경우 객체에서 사용할 수 있는 모든 방법을 빠른 방법으로 볼 수 있습니다document.body.screen 파일로 돌아가서 App.test.js를 입력하면 밑에 있는 목록에서 옵션이 튀어나오고 화살표 키로 스크롤해서 볼 수 있습니다.
"getByTagName"을 사용할 수 없음을 알 수 있습니다. 그림을 어떻게 가져올까요?응, 그림에alt 텍스트가 있어.

import { render, screen } from '@testing-library/react'
import App from './App'

test('Switches image upon clicking', () => {
  render(<App />)
  const img = screen.getByAltText(/My dog, Beany/i)
  console.log(img)

})

이것은 우리가 처음으로 테스트를 시도한 것이기 때문에, 나는 가능한 한 많은 테스트를 해서 당신의 생각이 효과적임을 증명할 것을 건의합니다.위 코드를 실행하면, 테스트 서버에서 React 노드처럼 보이는 로그를 볼 수 있습니다.
현재 우리는 이미 프로그램을 렌더링했고, 우리는 이미 그림을 가지고 있기 때문에, 클릭을 시뮬레이션할 때가 되었다.

import { render, screen, fireEvent } from '@testing-library/react'
import App from './App'

test('Switches image upon clicking', () => {
  render(<App />)
  const img = screen.getByAltText(/My dog, Beany/i)
  fireEvent.click(img)

})

우리는 React 테스트 라이브러리에서 screen. 대상을 가져오고 console.log 방법을 사용할 수 있다.그림을 전달하면 화면의 그림이 바뀔 것으로 예상할 수 있습니다.그래서 테스트의 마지막 부분에서 우리는 이 기대치를 쓸 것이다.

import { render, screen, fireEvent } from '@testing-library/react'
import App from './App'

test('Switches image upon clicking', () => {
  render(<App />)
  const dogImg = screen.getByAltText(/My dog, Beany/i)
  fireEvent.click(dogImg)

  const notDogImg = screen.getByAltText(/Rainbow frowny face/i)
  expect(notDogImg).toBeInTheDocument()
})

현재, 당신은 이미 React에서 첫 번째 테스트를 작성했습니다.당신도 테스트 라이브러리를 이해하고 더 많은 테스트를 작성할 수 있는 도구를 얻었으면 합니다!
아름다운 풍경화 한 장으로 끝내도 무방하다.

또 아름답고 햇살이 쨍쨍한 디스코--농담이야!이것은 혜덕비 섬에서 온 것이다.
즐거운 코딩!