2019년 React 애플리케이션 테스트

저자: Peter Ekene Eze✏️
테스트는 소프트웨어 개발에서 매우 논란이 되는 개념이다.모든 사람이 테스트를 진행하는 가장 좋은 방식이나 가장 좋은 도구, 심지어 테스트의 우선순위에 대해 일치시키기 어렵지만, 우리가 일치할 수 있는 것은 이것이 모든 제품의 매우 관건적인 부분이므로 이렇게 대해야 한다는 것이다.
이 글에서, 우리는 React 응용 프로그램을 테스트하는 가장 좋은 방법을 자세히 연구할 것이다.여기서 설명하는 개념은 다른 자바스크립트 프레임워크, 예를 들어 Vue, 심지어 다른 언어에 분명히 적용될 것이다. 그러나 정확하게 보기 위해서 우리는 React에서 시범을 보일 것이다.
우리가 시작하기 전에 주의해야 할 것은 이 글은 테스트에 대한 전면적인 소개가 아니라는 것이다.그것은 당신이 어떻게 React에서 테스트를 해야 하는지 이해하는 데 더욱 큰 시야를 넓힐 수 있다. (만약 당신이 아직 이렇게 하지 않았다면)

선결 조건

본 논문은 더 자세히 논의하기 전에 다음과 같이 가정합니다.

Node.js ≥v6 시스템에 설치

npm 시스템에 설치

시스템에 설치된

React 버전 16.8 이상

Create-react-app 시스템에 설치

당신은 ReactJS에 대해 기본적으로 알고 있습니다

일반 테스트 개념

테스트 개념이 완전히 낯설다면, 테스트는 응용 프로그램 활동을 자동화하는 방법이며, 구성 요소의 모든 기능이 해야 할 임무를 완성했는지 수동으로 검사할 필요가 없습니다.물론 이것은 테스트의 전체 내용은 아니지만, 당신에게 시작의 전체적인 사고방식을 제공합니다.
테스트 역시 코드 조절에 도움이 된다.만약 여러 명의 공헌자가 같은 프로젝트에서 일한다면, 테스트는 코드 라이브러리의 각 부분에 정확한 기능을 지정하는 데 도움을 줄 수 있습니다.따라서 시스템의 문제를 검출하고 복구하는 것이 매우 쉽다.

JavaScript 테스트 프레임워크

지금까지도 Jest은 가장 유행하는 자바스크립트 프레임워크라고 할 수 있으며 Github에는 270k가 넘는 별이 있다.그것은 페이스북이 세운 것이고 페이스북의 Jest 팀이 계속 유지하고 지원한다.Jest는 React가 추천하는 제로 설정javascript 테스트 프레임워크입니다. 사용하기 쉽습니다.2019년에는 900여 명의 공헌자를 보유한 자바스크립트 커뮤니티의 수용률이 매우 높았다.
다른 유행의 대체 방안은 Mocha과 Jasmine이다.Mocha는 가장 자주 사용하는 JavaScript 테스트 프레임워크라고 주장합니다.그것은 Github에 18k개가 넘는 항성이 있다.Asides the massive Economic Mocha는 완벽한 옵션과 대량의 문서를 가지고 있습니다.그것 또한 매우 유연하여 많은 확장을 진행할 수 있다.
한편 재스민은 공식 추천 Angular.js 테스트 프레임워크로 입증됐다.그것은 14k stars on Github여 개의 테스트 프레임워크를 가지고 있으며 자원과 지역사회가 가장 많이 지원하는 가장 오래된 테스트 프레임워크 중의 하나이다.심지어 농담은 재스민에 세워진 것이다.
이러한 틀을 감안하면 주의해야 할 것은 명확한'최고'가 없다는 것이다.장기적으로 보면, 이 모든 것은 무엇이 너에게 가장 좋은지에 달려 있다.이 문장에서 우리는 우스갯소리로 시범을 보일 것이다.

Jest 구성

기본적으로createreact 프로그램은 이 설정을 첨부합니다.그러나 유연성과 완전성을 위해 우리는 클라이언트를 위해 Jest과 webpack을 수동으로 설정하는 방법을 보여 주었다.
1단계: 프로젝트 디렉토리에서 npm install --save-dev jest 실행
단계 2: 응용 프로그램의 package.json 파일로 이동하여 테스트 스크립트를 추가합니다.

"script":{
  "test": "jest"
}

3단계: 다음은 .babelrc.js 파일을 설정해야 합니다. package.json에 사전 설정이 가리키기 때문입니다.모든 테스트에 자동으로 파일 추출 및 적용

const isTest = String(process.env.NODE_ENV ) === 'test'
module.export = {
  presets: [['env', {modules: isTest ? 'commonjs' : false}], 'react'],
  plugins: [
  'syntax-dynamic-import',
  'transform-object-rest-spread',
],
}

이 점을 통해 바벨은 우리가 테스트를 통과하고 있다는 것을 깨닫고 우리의 모든 eSmodule를 CommonJS로 전송할 수 있다.

React 애플리케이션 테스트

React 응용 프로그램을 테스트할 수 있는 많은 방법이 있습니다.우리는 그중의 일부를 연구할 것이다.

유닛 테스트 React 구성 요소

단원 테스트는 소프트웨어의 각 단원/구성 요소를 단독으로 테스트하여 그 정확성을 검증한다.지금 우리는 어떻게 React 응용 프로그램에서 이 점을 실현합니까?만약 login.js 파일에 이러한 로그인 구성 요소가 있다면:

function Login({ onSubmit }) {
  return (
    <div>
      <Form
        onSubmit={e => {
          e.preventDefault()
          const { username, password } = e.target.elements
          onSubmit({
            username: username.value,
            password: password.value,
          })
        }}
      >
        <label style={{ justifySelf: 'right' }} htmlFor="username-input">
          Username
        </label>
        <Input
          id="username-input"
          placeholder="Username..."
          name="username"
          style={{ flex: 1 }}
        />
        <label style={{ justifySelf: 'right' }} id="password-input">
          Password
        </label>
        <Input
          placeholder="Password..."
          type="password"
          name="password"
          aria-labelledby="password-input"
        />
      </Form>
    </div>
  )
}

위의 코드는 간단한 로그인 구성 요소입니다. login.test.js 파일에서 테스트를 진행할 것입니다.

import React from 'react'
import ReactDOM from 'react-dom'
import Login from '../login'
  test('calls onSubmit with the username and password when submitted',() => {
    const handleSubmit = jest.fn()
    const container = document.createElement('div')
    const form = container.querySelector('form')
    const {username, password} = form.element 
    username.value = 'Kenny'
    passwords.value = 'pineapples'

    form.dispatchEvent(new window.event('submit'))
      expect{handleSubmit}.toHaveBeenCalledTimes(1)
      exopect{handleSubmit}.toHaveBeenCalledWith({
        username: username.value,
        password: password.value, 
      })
  ReactDOM.render(<Login onSubmit = {handleSubmit} />, container)
  })

테스트는 div을 찾아 용기 변수에 전달합니다.그리고 이 용기 변수에서 querySelector('form')을 호출하여 폼을 만듭니다.
다음은 대상 파괴를 사용하여 form.element에서 필드를 가져옵니다.submit 이벤트에서 dispatchEvent()을 호출했기 때문에, 폼이 무엇을 하는지, 또는submit 이벤트를 촉발할 때 어떤 값을 가지고 있는지 테스트할 수 있습니다.이것은 이벤트가 한 번 촉발되어야 하고, 촉발할 때 사용자 이름과 비밀번호가 있어야 한다는 것을 나타낸다.

form.dispatchEvent(new window.event('submit'))
  expect{handleSubmit}.toHaveBeenCalledTimes(1)
  exopect{handleSubmit}.toHaveBeenCalledWith({
  username: username.value,
  password: password.value, 
})

물론, 우리는 npm run test으로 테스트를 실행할 수 있다.

스냅샷 테스트

이전에 우리는 특정한 구성 요소를 테스트하여 그들이 예상한 대로 작동하도록 확보할 수 있었지만, 우리가 아직 하지 않은 것이 하나 있다. 바로 사용자 인터페이스의 구조를 테스트하는 것이다.우리는 스냅샷 테스트를 통해 이 점을 실현할 수 있다.다음 예제를 고려하십시오.

render(){
  <div>
    <p> Current count: {this.state.count}</p>
    <button className = 'increment'
      onClick ={this.increment}>
        + 
    </button>
    <button className = 'decrement'
      onClick ={this.decrement}>
        -
    </button>
  </div>
}

만약에 구성 요소에 특정한 형식이 있다면, 예를 들어 점증 단추가 점감 단추 이전에 이것이 사실이라면, 테스트가 통과될 것이라고 상상해 보세요.디자이너가 이 형식을 변경하면 DOM의 렌더링 형식이 실제로 변경됩니다.그렇다면 DOM의 렌더링 함수에 대한 예상치 못한 변경을 피하는 방법은 무엇일까요?
스냅샷 테스트는 주어진 시간에 구성 요소의 스냅샷을 촬영하고 이전에 보여준 내용을 DOM에 저장하는 데 도움을 줍니다.따라서 구성 요소에 대한 테스트를 실행할 때 Jest는 기존 스냅샷과 다른 내용을 렌더링하는지 알려 줍니다.변경 사항을 수락하거나 변경 통지를 받을 수 있습니다.
이 테스트를 실행하기 위해 react-test-renderer 폼을 사용합니다. 이 폼은 특정 시간의 테스트에 JSON 표시를 제공합니다.그런 다음 Jest를 사용하여 데이터를 저장합니다.

import React form 'react'
import Counter from './counter'
import {shallow} from 'enzyme'
import renderer from 'react-test-renderer'

describe('Counter component', () => {
it('matches the snapshot', () => {
  const tree = renderer.create(< Counter/>).toJson()
expect(tree).toMatchSnapshot()
})
it('start with a count of 0', () => {
  const wrapper =shallow(<Counter/>)
  const text = wwrapper.find('p').text()
  expect(tesxt).toEqual('Current count: 0')
})
it('can increment the count when the button is clicked', ()=>{
const wrapper = shallow(<Counter/>)
}

우선 Jest에 저장될 counter 구성 요소에 대한 JSON 표시를 받았습니다.expect () 방법은 트리를 매개 변수로 하는데 이것이 바로 다음 렌더링과 비교하는 원인이다.

통합 테스트

앞에서 말한 바와 같이 통합 테스트는 단일 단원을 하나의 그룹으로 조합하고 테스트하는 곳이다.예를 들어, 만약 우리가 두 개의 함수가 하나의 상하문에서 함께 작업한다면, 우리는 집적 테스트를 사용하여 그것들이 서로 정확하게 상호작용하도록 확보할 것이다.하나의 구성 요소에 두 개의 숫자를 더하는 가장 간단한 용례를 생각해 봅시다.

export const add = (x,y)=> x + y

export const total = (Tax,price) => {
  return "$" + add(Tax, price)
}

그리고 app.test.js에서 우리는 해냈다.

import {add,total} from './App' 

test('add', () => {
  expect(add(1,2)).toBe(3)
})

test('total', () =>{
  expect(total(5,20)).toBe(25);
})

권장 테스트 도구

React 테스트 라이브러리

개인적으로, 나는 이것이 React 구성 요소를 테스트하는 아주 좋은 도구라고 생각한다.그것은 사용자의 관점에서 테스트 문제를 해결했다.또한 UI 구성이 아닌 특정 요소 레이블에 적용되므로 유용합니다.이 라이브러리가 어떻게 작동하는지 보여주기 위해서, 이전에 이 라이브러리로 작성된 단원 테스트를 재구성합시다.

import React from 'react'
import ReactDOM from 'react-dom'
import {render,simulate} from 'react-testing-library'
import Login from '../login'

test('calls onSubmit with the username and password when submitted',() => {
const fakeuser = generate.loginForm
const handleSubmit = jest.fn()
const {container,getByLabelText, getByText} = render(<login onSubmit= {handleSubmit}/>)
const usernameNode = getByLabelText('username')
const passwordNode= getByLabelText('password')
const formNode = container.querySelector('form')
const submitButtonNode = getByText('submit')

위의 예에서 우리는 UI를 걱정하지 않고 요소와 관련된 이름을 가져와 요소를 테스트하는 데 더욱 관심을 기울인다.이것은 이 라이브러리를 사용하는 것이 다른 대체품(예를 들어 효소와cypress)에 비해 주요한 장점이다.

결론

본고에서 우리는 React 응용 프로그램을 테스트하는 각종 방법과 테스트의 중요성을 연구했다.나는 이 글이 당신이React에서 테스트의 중요성을 이해하고 테스트를 어떻게 하는지 보여 줄 수 있기를 바랍니다.
편집자: 이 문장에 무슨 문제가 있습니까?정확한 버전 here을 찾을 수 있습니다.

플러그인: 네트워크 어플리케이션용 DVR용 LogRocket

 

 
LogRocket은 프론트 로그 기록 도구로 질문을 다시 재생할 수 있습니다. 마치 브라우저에서 발생한 것처럼.LogRocket은 오류가 발생한 원인을 추측하거나 화면 캡처와 로그 저장을 물어보지 않고 세션을 다시 재생할 수 있도록 합니다.프레임워크가 어떻든지 간에 모든 응용 프로그램과 완벽하게 어울릴 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 추가 상하문을 기록합니다.
 
LogRocket은 Redux 작업과 상태를 기록하는 것 외에도 콘솔 로그, JavaScript 오류, 스택 추적, 헤더+본문이 있는 네트워크 요청/응답, 브라우저 메타데이터와 사용자 정의 로그를 기록합니다.또한 DOM을 사용하여 페이지에 HTML과 CSS를 기록하여 가장 복잡한 단일 페이지 응용 프로그램이라도 픽셀 수준의 비디오를 재구성합니다.
 
Try it for free .
게시물 Testing React applications in 2019이 LogRocket Blog에 먼저 올라왔습니다.