React를 사용하여 재사용 가능한 구성 요소를 만드는 동시에 TDD 연습을 시작하는 방법

본고는 테스트 구동 개발을 어떻게 실천하는지 가르치는 동시에 다시 사용할 수 있는react 구성 요소를 어떻게 테스트하는지 가르치고자 한다.
시작 전 요구 사항

node를 설치했습니다.컴퓨터의 js

어플리케이션

의 기본 설정을 만들기 위해 터미널에서 작업해야 합니다.

설치효소npx create-react-app app-name

효소 어댑터npm i -D enzyme를 설치합니다. 왜냐하면 React

의 버전 16을 사용하기 때문입니다.

src/setupTests를 만들거나 편집합니다.js 다음 코드 일치

import '@testing-library/jest-dom/extend-expect';
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({
  adapter: new Adapter()
})

현재 이 작업을 마쳤습니다. 프로그램을 만들 때 설치 프로그램이 첨부한 단일 테스트를 실행할 수 있는지 확인하십시오.
터미널에서 npm 테스트를 실행하고 a에 따라 모든 테스트를 실행하면 다음과 같은 화면을 볼 수 있습니다.

완료되면 파일 src/App의 테스트 용례를 삭제합니다.테스트js가 우리의 테스트를 만들기 시작합니다.
우리는 무엇을 실현하고 싶습니까?이 연습에서, 우리는 응용 프로그램에서 여러 번 다시 사용할 수 있는 단추 구성 요소를 만들고 싶다. 구체적으로, 우리는 단추 구성 요소를 호출할 때마다 다른 텍스트를 설정할 수 있기를 바란다.

우리 갑시다!

좋습니다. 우선 TDD 원칙에 따라 단추 구성 요소와 응용 프로그램 구성 요소를 위한 코드를 만들기 전에 실패한 테스트를 만들어야 합니다.
테스트를 만들기 전에 descripe 블록을 만들고 beforeAll () 함수를 추가합니다. 테스트가 실행될 때마다 appWrapper를 만들어서 코드를 건조하게 유지합니다.

let appWrapper
  beforeAll(() => {
    appWrapper = shallow(<App />)
  })

appWrapper는 응용 프로그램 구성 요소를 포함합니다.
이제 src/App로 이동합니다.테스트js와 첫 번째 테스트 용례는 응용 프로그램 구성 요소가 단추 구성 요소를 보여 줍니다. 이 구성 요소는 우리의 제출 단추가 될 것입니다.

it('renders a button component', () => {
    const submitButton = appWrapper.find(SubmitButton)
})

이 줄 코드를 쓴 후, 우리는 다시 테스트를 실행해야 한다. 우리는 우리가 실패한 테스트를 볼 수 있다.

녹색 테스트를 계속합시다.TDD의 또 다른 단계 이후, 우리는 테스트를 녹색으로 바꾸기 위해 충분한 코드를 작성할 수 있을 뿐이다.
단추를 만듭니다.src 폴더에서 다음 코드 사용하기

export default() => {}

응용 프로그램에서 다음 jsx를 만듭니다.js는 단추 구성 요소를 되돌려줍니다.

import React from 'react';
import SubmitButton from './Button'

function App() {
  return <SubmitButton />
}
export default App;

또한 src/App에서 단추 구성 요소를 가져와야 합니다.테스트회사 명

import React from 'react';
import App from './App';
import { shallow } from 'enzyme';
import SubmitButton from './Button'

describe('App', () => {
  let appWrapper
  beforeAll(() => {
    appWrapper = shallow(<App />)
  })

  it('renders a button component', () => {
    const submitButton = appWrapper.find(SubmitButton)
  })
})

지금 우리의 테스트는 녹색이다.

단언을 통해 이 테스트를 완성합시다.첫 번째 테스트에 다음 코드를 추가하여 응용 프로그램에 원키 구성 요소가 있는지 확인합니다.

expect(submitButton).toHaveLength(1)

전체 테스트는 다음과 같습니다.

it('renders a button component', () => {
    const submitButton = appWrapper.find(SubmitButton)

    expect(submitButton).toHaveLength(1)
})

테스트가 여전히 녹색인지 확인하십시오.
지금까지 우리는 단추 구성 요소를 만들고 응용 프로그램 구성 요소에 보여줌으로써 TDD를 조금 만들었다.

계속 연습하자!

우리의 두 번째 테스트는value라는 속성을 단추 구성 요소에 전달할지 여부를 검사할 것이다
실패한 테스트를 만들어 보겠습니다.

it('pass value as prop', () => {
    const submitButton = appWrapper.find(SubmitButton)

    expect(submitButton.props().value).toBeDefined()
  })

우리는 단추 구성 요소에value라는 속성을 정의하기를 원하지만, 정의되지 않은 값을 받았습니다.

이 테스트를 녹색으로 만들어보자!
테스트를 통과하기 위해서, 응용 프로그램 구성 요소 내부의 단추 구성 요소에value라는 prop을 전달해야 합니다

function App() {
  return <SubmitButton value="" />
}

지금 우리의 테스트는 또 녹색입니다. 축하합니다!

우리 또 다른 테스트를 해서 TDD를 계속 연습합시다. 익숙해지면 교묘해지는 것을 기억하세요!
이 테스트에 대해 값 prop이 문자열 "Submit"과 같은지 확인하기 위해 다른 실패한 테스트를 만들 것입니다.

it("has a value prop equal to 'Submit'", () => {
    const submitButton = appWrapper.find(SubmitButton)

    expect(submitButton.props().value).toEqual('Submit')
  })

너는 이 테스트가 실패할 것이라고 상상할 수 있다

우리는 테스트를 녹색으로 만들기 위해 프로그램 구성 요소 내의 단추 구성 요소를 재구성해야 한다.

import React from 'react';
import SubmitButton from './Button'

function App() {
  return <SubmitButton value="Submit" />
}
export default App;

그래!이 세 가지 테스트는 지금 모두 통과되었다

만약 네가 온다면, 잘했어!이제 테스트 드라이브 개발이 무엇인지 잘 알고 있습니다.
간단히 살펴보겠습니다.

실패한 테스트를 작성하여 테스트에 실패한 코드를 작성하기에 충분하다

테스트 녹색을 위해 필요한 코드만 재구성

그리고 실패한 테스트를 다시 작성한 다음에 테스트를 녹색으로 재구성합니다

마지막으로, 보시다시피, 우리는 모든 테스트 용례에서 중복되고 있습니다npm i - D enzyme-adapter-react-16. 그래서 코드를 건조시키기 위해 재구성합시다.

let appWrapper, submitButton
  beforeAll(() => {
    appWrapper = shallow(<App />)
    submitButton = appWrapper.find(SubmitButton)
  })

현재 우리는 모든 테스트에서 안전하게 삭제할 수 있다const submitButton = appWrapper.find(SubmitButton). 우리의 테스트는 여전히 녹색이다.
전체 코드:

import React from 'react';
import App from './App';
import { shallow } from 'enzyme';
import SubmitButton from './Button'

describe('App', () => {
  let appWrapper, submitButton
  beforeAll(() => {
    appWrapper = shallow(<App />)
    submitButton = appWrapper.find(SubmitButton)
  })

  it('renders a button component', () => {

    expect(submitButton).toHaveLength(1)
  })

  it('pass value as prop', () => {

    expect(submitButton.props().value).toBeDefined()
  })

  it("has a value prop equal to 'Submit'", () => {

    expect(submitButton.props().value).toEqual('Submit')
  })
})

기타 리소스

TDD를 수행하는 방법을 명확하게 설명하는 훌륭한 리소스입니다.
github.com/Viricruz로 전화해 주세요.

즐거운 테스트!!