농담. JavaScript 테스트 용.

JEST에 대해 알아보십시오.

테스팅이란 무엇입니까?

테스트는 일부 코드가 미리 정의 된 사양 또는 기대치를 충족 할 수 있는지 확인하는 것을 의미합니다. 테스트는 고품질 제품을 개발하는 데 필수적인 부분입니다. 실제로 많은 유형의 테스트를 찾을 수 있습니다. 일부는 단위 테스트, 통합 테스트, UI 테스트 등으로 명명 될 수 있습니다.

농담

Jest는 Facebook에서 소개 한 라이브러리이며 JavaScript, 특히 React 애플리케이션을 테스트하는 데 사용됩니다. NPM 패키지로 배포되어 모든 JavaScript 프로젝트에 설치할 수 있습니다. 명령 줄에서 jest 명령을 실행하고 모든 테스트를 한 번에 실행할 수 있습니다. Jest는 결과를 확인하기위한 테스트 어설 션을위한 자체 API를 제공하여 실제로 테스트 프로세스를 훨씬 쉽게 만듭니다.

일반적인 테스트 흐름은 다음과 같습니다.

  • 함수를 가져옵니다.
  • 함수에 대한 입력을 지정하십시오.
  • 함수에서 예상되는 출력을 지정하십시오.
  • 함수에서 생성 된 출력이 예상 출력과 동일한 지 확인합니다.
  • 예상을 충족하면 테스트를 통과하고 그렇지 않으면 실패합니다.

시작하기

이 기사에서는 주어진 배열에서 중복 요소를 제거하는 함수를 테스트 할 것입니다. 아주 간단합니다. 그러니 발을 적시려면 터미널에 들어가 보겠습니다.

mkdir dummy_jest && cd $_
npm init -y

npm i jest --save-dev

또한 jest를 실행하려면 package.json에서 테스트 스크립트를 다음과 같이 편집해야합니다.

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

mkdir __tests__

설명 블록부터 시작하겠습니다.

describe(name, fn) 여러 관련 테스트를 함께 그룹화하는 블록을 만듭니다.

두 가지 인수가 필요합니다. 첫 번째는이 블록의 내용을 설명하는 문자열이고 두 번째는 실제 테스트를 포함하는 콜백 함수입니다. 따라서 초기 빈 블록은 다음과 같이 보일 수 있습니다.

describe("Filter function", () => {
  // test stuff
});

describe("Filter function", () => {
  test("Remove the duplicate element from array", () => {
    // actual test
  });
});

function removeDuplicate(inputArr) {
let x = inputArr.filter((v, i) => inputArr.indexOf(v) === i)
return x;
}

const input = ['John', 'Paul', 'George', 'Ringo', 'John', 'Ram'];
const output = ['John', 'Paul', 'George', 'Ringo', 'Ram'];

테스트를 작성할 때 값이 특정 조건을 충족하는지 종종 확인해야합니다. 다양한 것을 검증 expect할 수있는 여러 " 매처 "에 액세스 할 수 있습니다.

그래서 우리는 다음과 같은 테스트를 작성하게됩니다.

describe("Filter function", () => {
test("it should remove duplicate elements", () => {
const input = ['John', 'Paul', 'George', 'Ringo', 'John', 'Ram'];
const output = ['John', 'Paul', 'George', 'Ringo', 'Ram'];
expect(removeDuplicate(input)).toEqual(output);
});
})

마지막으로 테스트를 실행할 수 있습니다.

npm test

이제 우리는 함수에 다양한 유형의 시나리오를 제공하여 테스트가 어떻게 반응하는지 확인합니다. 계속해서 다음과 같이 소문자로 시작하는 동일한 이름으로 입력을 편집하십시오.

const input = ['John', 'Paul', 'George', 'Ringo', 'John', 'Ram','ram'];
const output = ['John', 'Paul', 'George', 'Ringo', 'Ram'];

이제 함수가 소문자와 대문자로 작동하지 않는다는 것을 알고 있습니다. 그래서 우리는 기능을 개선해야한다는 것을 알게되었습니다.

또한 describe 블록 내에서 다음과 같이 여러 테스트를 실행할 수 있습니다.

describe("Filter function", () => {
// test stuff
test("it should remove duplicate elements", () => {
const input = ['John', 'Paul', 'George', 'Ringo', 'John', 'Ram'];
const output = ['John', 'Paul', 'George', 'Ringo', 'Ram'];
expect(removeDuplicate(input)).toEqual(output);
const input2 = ['Aaron', 'Bobby', 'Marshall', 'Joyner', 'Bobby'];
const output2 = ['Aaron', 'Bobby', 'Marshall', 'Joyner'];
expect(removeDuplicate(input2)).toEqual(output2);
});
})

그래서 Jest에 대한 기본적인 소개였습니다. 다음 기사에서는 Jest를 사용하여 React 컴포넌트를 테스트 할 것입니다. Jest에 대해 자세히 알아 보려면 공식 문서 를 확인하십시오 .

Suggested posts

JavaScript의 이벤트 루프

호출 스택, 웹 API, 이벤트 대기열, 마이크로 작업, 매크로 작업

JavaScript의 이벤트 루프

이벤트 루프는 JavaScript의 비동기 프로그래밍의 비밀입니다. JS는 단일 스레드에서 모든 작업을 실행하지만 몇 가지 스마트 데이터 구조를 사용하면 멀티 스레딩의 환상을 얻을 수 있습니다.

Vue.js로 포트폴리오 웹 사이트를 구축하는 방법

Vue.js로 포트폴리오 웹 사이트를 구축하는 방법

포트폴리오 웹 사이트를 처음부터 구축하는 것은 웹 개발을 배우는 좋은 방법입니다. 개발자가 창의성을 발휘하고 문제 해결 능력을 향상시키는 데 도움이됩니다.