React Unit 테스트(자습서)

소개하다.

현실에 직면하자. 프로그램을 테스트하는 것만큼 좋은 방법은 없다.우리는 하루 종일 세워서 우리가 기대하는 결과를 시각적으로 얻을 수 있다.그러나 숨겨진 버그가 있을 때 어떤 일이 일어날까요?만약 이 구멍이 상당히 심각한 구멍을 드러낸다면?이 모든 것은 단원 테스트를 통해 우리의 React 프로그램에서 피할 수 있습니다.

필요한 의존 관계

좋습니다. 그러면 필요한 의존항은 무엇입니까? 우리는 어떻게 그것들을 설치합니까?걱정하지 마라, 나는 지금 이곳에서 이런 가치 있는 정보를 제공할 것이다.세 가지 종속성이 필요하므로 먼저 설치해 보겠습니다.

npm install jest-dom

npm install react-test-renderer

npm install @testing-library/react

이 의존 항목 중 하나가 있더라도 버전 제어가 최신식인지 확인하는 것이 좋습니다.프로그램이 create-react-app 로 만들어진 경우, 초기 설정에 첨부된 기본 @testing-library/react 파일을 테스트하는 데 사용되기 때문에 App.test.js 를 사용했을 수도 있습니다.

어떻게 자신의 테스트를 진행합니까

나는 너를 일하게 하고 싶지 않지만, 너에게는 읽을 때 코드를 따르는 것이 매우 중요하다.단원 테스트는 어렵지 않지만, 읽기만 통해 이해하려 한다면, 그것은 좀 곤혹스럽고 당황스러울 수도 있다.
좋아, 우리 시작합시다!

응용 프로그램 설정(테스트용)

먼저 src 아래에 components라는 새 폴더를 만듭니다.이 폴더에 이름이 buttons인 다른 폴더를 만듭니다.여기서부터 buttons 폴더에 두 개의 파일을 만듭니다.그것들은 각각 button.js과 button.css이다.button.js 내부에 다음 코드를 배치합니다.

// /src/components/buttons/button.js
import React from 'react';
import './button.css';

function Button({label}){
    return <div data-testid="button" className="button-style">{label}</div>
}

export default Button;

여기에서 우리가 사용하는 것은 기능 구성 요소로 {label}를 도구로 한다.또한 사용 중data-testid="button"도 확인할 수 있습니다.data-*는 HTML 속성으로 다른 개발자가 ID나 클래스의 이름을 표시하고 변경할 때 특히 유용하다.당신은 data에서 더 많은 정보를 얻을 수 있지만 시간이 제한된 정보this is a great source that sums up the concept를 보실 수 있습니다.
좋습니다. 프로그램의 맨 위에 있는 부분을 대충 방문합시다. ((App.js이 코드를 적용하려면:

// App.js
import React from 'react';
import Button from './components/buttons/button';

function App() {
  return (
    <div className="App">
      <header>
        <Button label="click me please"></Button>
      </header>
    </div>
  );
}

export default App;

클래스 "Apps"div는 중요하지 않지만 나중에 편집App.test.js하면 테스트에 실패할 수 있으므로 삭제App.js해야 합니다.이 강좌는 필요 없다App.test.js.
다음에 우리는 buttons 폴더로 돌아가서 button.css를 열 것이다.다음 코드를 입력합니다.

// /src/components/buttons/button.css

.button-style {
    border: 1px solid grey;
    padding: 10px;
    text-align: center;
}

이 부분은 기능 구성 요소를 보여주는 시각적 효과를 얻기 위해 프로그램을 시작할 계획이 없으면 CSS 스타일을 추가할 필요가 없습니다.그것은 단지 재미를 위해 강좌에 포함된 것이다!:)

단원 테스트 시간

마지막, 재미있는 부분!src/components/buttons 폴더에 __test__라는 새 폴더를 만듭니다.이 폴더에 button.test.js 라는 파일을 만들 것입니다.단원 테스트가 시작되면 프로그램의 트리를 따라 아래로 이동해서 확장자 .test.js 의 파일을 찾습니다.이 정보들은 매우 중요하니, 잠시 후에 더욱 설명할 것이다.button.test.js에서 파일 맨 위에 있는 기본 가져오기부터 시작하려고 합니다.이렇게 해야 합니다.

// /src/components/buttons/__test__/button.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './../button';
import { render } from '@testing-library/react';

응용 프로그램 트리의 가져오기에 익숙하지 않은 경우 React docs 및 Google을 참조하십시오.만약 당신이 React를 개발하고 있다면, 당신은 그것을 어떻게 사용하는지 이미 알고 있을 것이다.
알겠습니다. { render } 중에서 @testing-library/react 를 선택하겠습니다.우리는 즉시 우리의 첫 번째 테스트에서 이것을 사용할 것이다.

// uses @testing-library/react
it('renders without crashing',  () => {
    const div = document.createElement("div");
    ReactDOM.render(<Button></Button>, div)
})

it() 두 개의 매개 변수를 받아들인다.첫 번째 파라미터가 붕괴되지 않고 나타나는 데 사용되는 설명 문자열을 테스트에 제공하고, 두 번째 파라미터에 익명 함수를 제공합니다. 함수가 실행될 때 문제가 없으면, 이 함수는 브리 값을 되돌려줍니다.영어로 말하자면, 우리는 변수div를 설정하여 document.createElement("div")에 분배했다.그런 다음 버튼 구성 요소를 DOM에 렌더링합니다.
첫 번째 테스트를 실행하려면 IDE 터미널에 npm test를 입력하고 프롬프트가 나타나면 Enter 키를 누릅니다.가자, 기다릴게.
...
너의 첫 시험이 통과되었다!우리는 응용 프로그램을 파괴하지 않고 요소를 나타낼 수 있다는 것을 검증했다.잘했어!테스트를 종료하려면 IDE 터미널에서 CTRL + C만 누르면 됩니다.이제 DOM 요소의 현재 값을 셀 테스트로 계속할 수 있습니다.
우리는 다른 수입품이 필요하다.계속해서 맨 위에 있는 가져오기에 추가합니다.

// /src/components/buttons/__test__/button.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './../button';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect'; 
// New import ^

@testing-library/jest-dom/extend-expect에서 우리는 expect() 의존항에 첨부된 jest-dom 함수에 접근할 수 있다.
그런 다음 첫 번째 테스트 아래에 이 테스트를 추가합니다.

//uses @testing0library/jest-dom/extend-expect
it('renders button correctly', () => {
    const { getByTestId } = render(<Button label="click me please"></Button>)
    expect(getByTestId('button')).toHaveTextContent("click me please")
})

이것이 바로 우리가 테스트Button 구성 요소를 테스트하는 곳입니다!변수 getByTestId 아래에 단추와 탭 'click me please' 를 만들고 있으며, 'click me please' 를 포함하기를 희망합니다.만약 우리가 도구를 구성 요소에 전달할 수 없다면 테스트는 실패할 것이다.그러나!계속해서 테스트를 다시 실행합니다.서프라이즈!그들은 또 통과했다!
그런데 우리한테 문제가 있어...다음 두 가지 테스트를 살펴보십시오.

//uses @testing0library/jest-dom/extend-expect
it('renders button correctly', () => {
    const { getByTestId } = render(<Button label="click me please"></Button>)
    expect(getByTestId('button')).toHaveTextContent("click me please")
})

it('renders button correctly', () => {
    const { getByTestId } = render(<Button label="save"></Button>)
    expect(getByTestId('button')).toHaveTextContent("save")
})

무슨 이상한 일 눈치 챘어?그것들은 모두 같은 테스트이지만, 그들 사이에서 테스트하는 도구의 값은 다르다.
만약 우리가 테스트를 실행하려고 시도한다면 오류가 발생할 것이다.found multiple elements by [data-testid="button"] . 우리가 해야 할 일은 우리가 모든 테스트를 완성할 때, 테스트를 정리하는 방법을 포함하는 것이다.다행히도, 이것은 쉽게 할 수 있다.
우리 최고급 수입 친구import { render } from '@testing-library/react'; 기억나세요?우리는 작은 변화를 해야 한다.import { render, cleanup } from '@testing-library/react'; .
그런 다음 가져온 바로 아래 및 테스트의 바로 위에 이 행이 포함됩니다.afterEach(cleanup)이제 너는 다시 테스트를 실행할 수 있다.빨리 봐라, 그들이 또 왔다!
마지막 시간에는 테스트의 JSON 스냅샷을 소개합니다.이것은 모두 유용하다. 왜냐하면 스냅숏은 우리가 테스트를 통과한 실례를 만들고, 이 스냅숏을 미래의 테스트와 비교하여 그것들이 일치하는지 확인하기 때문이다.
파일 상단에 최종 가져오기 추가를 시작합니다.import renderer from 'react-test-renderer';이제 renderer가 생겼습니다. 최종 테스트를 작성할 것입니다.마지막 테스트를 다른 테스트의 하단에 배치합니다.

// uses renderer to create a snapshot of the Button component
it('matches snapshot', () => {
    // creates snapshot and converts to JSON
    const tree = renderer.create(<Button label="save"></Button>).toJSON()
    // expects the snapshot to match the saved snapshot code found in the __snapshot__ folder
    expect(tree).toMatchSnapshot()
})

위에서 말한 바와 같이, 우리는 이미 테스트의 스냅샷을 만들어서 다른 테스트 운행과 비교하는 데 사용한다./src/components/buttons/__test__/__snapshots__/button.test.js.snap에서 이 새 스냅샷을 찾을 수 있습니다.이 새 폴더/파일은 테스트를 실행한 후에 만들어집니다.

결론

여기 있습니다!이것들은 단원 테스트의 기초다.일단 이러한 기본 개념을 파악하면 더욱 복잡한 테스트를 계속 탐색할 수 있다.그 밖에 당신은 장기간 직장 생활에서 지도한 누구에게도 실험실을 창설할 수 있는 테스트를 할 수 있다.
이 강좌에서 환매 협의에 접근하고 싶으시다면you can find it here
즐거운 코딩!