React 테스트 소개

다른 사람들이 사용할 수 있도록 웹에 프로그램을 발표하기를 원합니다.그러나 응용 프로그램이 어떤 상황에서 실패할까 봐 사용자들이 불평하기 시작할 수도 있다.
일부 오류는 다시 발생할 수도 있고, 일부 최종 상황은 응용 프로그램의 실패를 초래할 수도 있다.이것은 초보자에게 영향을 주지 않을 수도 있지만, 대규모 생산 응용 프로그램에서 응용 프로그램이 출시될 때 실패할 위험만 무릅쓰면 안 된다.
그럼, 당신에게 일어나지 않을 것을 어떻게 확신합니까...
정답은 테스트입니다.

그럼 테스트는 도대체 뭐예요?

테스트는 코드 실행 방식에 대한 한 줄 한 줄 검사이다.응용 프로그램을 위한 스크립트를 실행하기 위해 코드를 작성할 수 있으며, 결과가 이상적인 상황에서 필요한 출력과 일치하는지 확인할 수 있습니다.
예를 들어 코드를 업데이트하거나 원본을 만드는 데 기여할 때 테스트가 편리합니다.코드를 업데이트한 후, 업데이트가 응용 프로그램의 기존 기능을 파괴하지 않도록 테스트를 실행할 수 있습니다.
구체적으로 말하면 실제 사용자가 그것을 사용할 때 발생하거나 발생하지 않을 수 있는 최종 상황이나 경계 조건을 테스트할 수 있습니다.
사용자가 잘못된 데이터를 입력했을 때 응용 프로그램의 행위는 어떻습니까?어떤 안전 문제가 있는지 여부와 같은 문제.
너는 테스트가 어떤 개발 과정에서 없어서는 안 되거나 없어서는 안 될 일부분이라고 말할 수 있다.너는 그것을 소홀히 해서는 안 된다.

나는 때때로 당신이 이전에 작성한 코드가 정상적으로 작동하는지 확인하기 위해 코드를 작성하는 것이 지루하다는 것을 알고 있지만, 일단 그것을 파악하면, 당신은 테스트의 개념을 좋아할 것이라고 보증합니다.

테스트를 통해 다음을 수행할 수 있습니다.

어플리케이션의 각 부분을 수동으로 검사하는 시간을 절약할 수 있습니다.코드를 작성하고 과정을 자동화하기만 하면 된다.

오류가 복제되지 않도록 합니다.버그를 복구할 때마다 테스트 용례를 작성할 수 있습니다. 그러면 버그가 반복되지 않습니다.

코드의 유연성을 높이고 유지보수를 더욱 쉽게 합니다. 그렇지 않으면, 작은 오류를 복구하기 위해 전체 코드 라이브러리를 수동으로 찾아야 합니다.

더 많아...
테스트 유형을 빠르게 살펴보겠습니다.

1. 단원 테스트

단원 테스트는 테스트 코드의 각 부분이나 말 그대로 테스트 코드의 단원 부분을 가리키며 이 부분들이 완벽하게 결합되도록 확보한다.
구체적으로 말하면 단원 테스트는 일반적으로 브라우저를 필요로 하지 않는다.렌더 출력을 테스트합니다.예를 들어 한 상태가 바뀌거나 한 그룹이 지정한 입력이 바뀌면 어떤 변화가 발생하는지, 이런 변화가 DOM에 영향을 미칠지 여부.

2. 기능 테스트

기능 테스트는 테스트 구성 요소의 행위에 더욱 중심을 두었다.
예를 들어 구성 요소가 개인으로 올바르게 렌더링되었든, 구성 요소의 onClick 함수가 정상적으로 작동하는지, 내비게이션 표시줄에 로그인한 사람의 이름이 올바르게 표시되었든 상관없다.
기능 테스트는 일반적으로 독립적으로 실행된다(즉, 응용 프로그램의 나머지 부분을 사용하지 않는 상황에서 구성 요소 기능을 테스트한다).

3. 통합 테스트

테스트 응용 프로그램의 전체 서비스를 통합하고 최종 사용자가 응용 프로그램을 사용할 때의 체험을 복제하려고 시도합니다.
통합 테스트는 일반적으로 단원과 기능 테스트보다 느리다. 왜냐하면 사용자 체험과 일치하기 어렵기 때문이다.
스모그 테스트와 얕은 렌더링 같은 다른 용어를 많이 만날 수 있지만, 우리는 간단하게 유지할 수 있습니다.

Jest 및 효소 소개

Jest는 노드 기반 테스트 실행 프로그램으로 노드 환경에서 테스트를 신속하게 병행하는 데 사용된다.그것은 테스트 목적에 사용되는 가장 자주 사용하는 프레임워크 중의 하나다.
Jest는 단순성을 매우 중시한다.그것은 npm나 실과 함께 설치할 수 있다.React 및 기타 어플리케이션에 적용됩니다.
설치 후, 테스트를 작성하고, 응용 프로그램 디렉터리의 터미널 창에서 명령 npmtest를 실행하는 것입니다.Jest를 초기화하고 모니터링 모드에서 테스트를 시작한 다음 관련 파일을 변경할 때 모니터링 모드에서 테스트를 자동으로 실행합니다.
효소는 React 응용 프로그램을 테스트하는 라이브러리입니다.구성 요소를 테스트하고 UI가 제대로 작동하는지 확인하는 작업을 시뮬레이션하기 위해 단언을 작성할 수 있습니다.
Jest와 효소는 상호보완성이 좋으므로 본고에서 우리는 두 가지를 동시에 사용할 것이다.
모차와 같은 다른 테스트 프레임워크도 있으니 한번 해 보세요.
하지만 이제 우스갯소리를 시작하자.

농담

Create React App을 사용하여 새 React App을 설정하는 경우 Jest가 사전 설치되어 있으므로 설치할 필요가 없습니다.
Jest를 수동으로 설치하려면

npm install --save-dev jest

터미널에 있어요.소포 안에 있습니다.json 파일, 테스트를 실행하는 명령을 설정합니다.

...
scripts: {
 "test": "jest",
 ...
}

첫 번째 테스트를 Jest로 작성합니다.

네, 지금 해야 할 일은 파일을 만들어서 테스트를 작성하는 것입니다.
근데 제스트가 테스트 파일이 뭔지 어떻게 알아요?
일반적으로 Jest에게 이것은 테스트 파일이라는 것을 알려주는 두 가지 방법이 있다.

디렉토리에 있는 파일에 이름 테스트가 있으면 테스트로 간주합니다.

파일에 접두사가 있는 경우규범 js 또는.테스트js, 테스트 파일로 표시됩니다.

따라서 Jest는 디렉터리를 스캔해서 이런 파일을 찾고 코드를 실행합니다. 이것이 바로 테스트입니다.
실제 코드를 살펴보자.
Home이라는 파일을 만듭니다.테스트js 및 다음 모든 코드

describe('Our first test', () => {

  it('Multiplies numbers', () => {
      expect(5 * 10).toEqual(50);
      expect(20 * 50).toEqual(1000);
   });

이 코드를 이해합시다.

descripe()는 유사한 유형의 테스트를 정리하는 데 사용되며, 테스트 중인 내용이나 테스트 그룹의 목적을 설명할 수 있습니다.

it()는 단일 테스트를 정의하는 데 사용됩니다.이것은 특정한 테스트를 통해 실현하고자 하는 목표나 함수의 기능을 설명합니다.테스트 () 방법으로 대체할 수도 있습니다.

expect() 및.toEqual()은 실제 테스트를 수행하는 곳입니다.우리는 함수를 expect () 에 놓고, expect () 는 함수의 실제 결과를 얻고, 예상 결과는 toEqual () 에 넣습니다.만약 둘이 일치한다면 테스트가 통과될 것이다. 그렇지 않으면 테스트가 실패할 것이다.

nodetest 명령을 사용하여 다음 코드를 실행합니다.콘솔에 테스트와 관련된 많은 정보를 제공하는 예쁜 표가 있다는 것을 알게 될 것이다.예를 들어 그것이 통과되었는지, 실패했는지, 어느 줄에서 실패했는지, 시간이 걸렸는지, 그리고 많은 다른 일들이 있었다.
이제 통과와 실패에 주목하자.상술한 코드는 의심할 여지없이 정확하다.하지만 우리가 이런 걸 통과하면 어떡하지,

describe('Our second test', () => {

  it('Multiplies numbers', () => {
      expect(5 * 10).toEqual(25);
   });

그러면 테스트가 실패하고 콘솔에서 FAIL(실패)이라는 단어가 깜박입니다.
만세, 네가 첫 번째 테스트를 썼어.
물론 실제 세계의 테스트는 이렇게 간단하지 않지만, 테스트가 실제로 어떤 모습인지 대충 알 수 있을 뿐만 아니라, Jest를 간략하게 소개할 것입니다.
Jest는 매우 우호적인 틀이다.그것은 테스트에 실패한 곳을 정확하게 알려주고 내면적인 통찰력을 준다.
이제 Jest를 사용하여 자바스크립트 코드를 테스트할 수 있습니다.
만약 당신이 React 구성 요소를 테스트해 보고 싶다면, 이 효소 프레임워크가 있으면, React 구성 요소를 테스트하는 것이 훨씬 쉽다.

효소를 사용하여 반응 성분을 측정하다

효소는createreact 프로그램에 따라 미리 설치되지 않기 때문에 이 명령을 수동으로 사용해서 설치해야 합니다.

npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
//or with yarn
yarn add --dev enzyme enzyme-adapter-react-16 react-test-renderer

참고 - 효소의 설치는 React 버전에 따라 결정됩니다. 여기에서 React-16을 사용합니다.
효소를 사용하려면react를 사용하기 위해 방금 설치한 패키지를 설정해야 하기 때문에setupTests라는 파일을 만들어야 합니다.다음 코드를 추가합니다.
그것은 우리가 방금 설치한 효소 패키지 어댑터를 사용한다.

// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

우리는 지금 효소를 사용하여 테스트를 진행할 수 있다.
테스트하고 추가할 구성 요소의 이름을 사용하여 파일을 만듭니다.테스트다음은 js.
안에 아래 코드를 적어 주세요.

// MyComponent.test.js
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe("MyComponent Render Test", () => {
  it("should render my component properly", () => {
    const wrapper = shallow(<MyComponent />);
  });
})

마찬가지로descripe는 한 그룹의 테스트 목적을 설명하는데 it() 함수는 특정 테스트의 정의 목적을 지정합니다.
shallow () 단언 방법은 효소의 일부분입니다. shallow () 는 그것이 정확하게 나타나든 안 나오든 간에 제공하는 구성 요소를 테스트하는 데 사용됩니다.여기서 주의해야 할 점은 구성 요소에 존재할 수 있는 모든 하위 구성 요소를 무시하기 때문에 특정한 코드 세그먼트를 테스트하는 단원 테스트이다.
하위 구성 요소를 테스트하려면 mount () 함수를 사용하십시오. 이 함수는 전체 구성 요소와 하위 구성 요소에 대해 통합 테스트를 수행합니다.
이것은 효소를 사용하여 성분을 측정하는 가장 간단한 예이다.여정은 여기서 끝나지 않았다.실제 응용 프로그램에 대한 테스트를 시작하기 전에 더 많은 지식을 알아야 할 수도 있지만, 이것은 좋은 시작입니다.
테스트에 대한 더 많은 정보를 알고 싶으면, 특히react에서 테스트를 하려면 Jest와react의 문서를 보십시오.너는 그곳에서 유용한 물건을 많이 찾을 것이다.

한층 더 읽다

Jest docs for react testing

react docs testing overview

기억하십시오:
만약 처음에 어떤 테스트도 없었다면 테스트는 실패하지 않았을 것이다.
이 원칙을 따르지 마라.😂
Daily 라벨을 추가할 때마다 가장 좋은 프로그램 뉴스를 제공할 수 있다.우리는 당신이 미래를 해독할 수 있도록 수백 개의 합격원을 배열할 것입니다.