집 > 기사 > 웹 프론트엔드 > 제스트란 무엇인가요? Jest의 기본 사용법

제스트란 무엇인가요? Jest의 기본 사용법

不言앞으로: 2018-10-18 14:51:267511검색

이 글의 내용은 Jest가 무엇인지에 관한 것입니다. Jest 관련 지식의 소개는 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1 Jest란 무엇입니까?

Jest

Jest는 Facebook의 오픈 소스 JavaScript 테스트 프레임워크 세트로 개발자에게 필요한 어설션, JSDom, 적용 범위 보고서 및 기타 테스트 도구를 자동으로 통합합니다. 구성이 거의 없는 프레임워크입니다. 그리고 Facebook의 오픈 소스 프런트엔드 프레임워크인 React를 테스트하는 데 매우 친숙합니다.

2 Jest 설치

2.1 package.json 초기화

셸에 다음 명령을 입력하여 프런트엔드 프로젝트를 초기화하고 package.json을 생성합니다.

npm init -y

2.2 Jest 및 관련 종속 항목 설치

다음을 입력합니다. 셸에서 명령을 실행하고 테스트에 필요한 종속성을 설치합니다:

npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime

babel-jest, babel-core, regenerator-runtime, babel-preset-env 이러한 종속성은 단위 테스트에 ES6의 구문 기능을 사용할 수 있도록 합니다. ES6에서 제공하는 가져오기가 제공됩니다. 모듈을 가져오는 방법은 Jest 자체에서 지원되지 않습니다.

2.3 .babelrc 파일 추가

프로젝트 루트 디렉터리에 .babelrc 파일을 추가하고 파일에 다음 내용을 복사하세요.

{ 
 "presets": ["env"]
}

2.4 package.json에서 테스트 스크립트를 수정

패키지를 엽니다. json 파일을 만들고 테스트 값을 jest로 변경:

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

에서 스크립트를 변경합니다. 3. 첫 번째 Jest 테스트를 작성합니다.

src 및 테스트 디렉터리와 관련 파일을 만듭니다.

프로젝트 루트 디렉터리에 src 디렉터리를 만들고 src 디렉터리에 function.js 파일을 추가하세요

프로젝트 루트 디렉터리에 테스트 디렉터리를 생성하고, 테스트 디렉터리에 function.test.js 파일을 생성하세요

Jest는 .spec을 사용하여 이름이 지정된 프로젝트에서 모든 테스트를 자동으로 찾습니다. .js 또는 .test.js 파일을 작성하고 실행합니다. 일반적으로 테스트 파일을 작성할 때 명명 규칙을 따릅니다. 테스트 파일의 파일 이름 = 테스트되는 모듈의 이름 + .test.js. 테스트 중인 파일은 function.js이고 해당 테스트 파일의 이름은 function.js입니다.

src/functions.js에서 테스트된 모듈을 생성하세요

export default {
  sum(a, b) {
      return a + b;
  }
}

test/functions.test.js 파일에서 테스트 케이스를 생성하세요

import functions  from &#39;../src/functions&#39;;
test(&#39;sum(2 + 2) 等于 4&#39;, () => {
  expect(functions.sum(2, 2)).toBe(4);
})

npm run test를 실행하세요. Jest는 셸에 다음 메시지를 인쇄합니다.

PASS  test/functions.test.js
  √ sum(2 + 2) 等于 4 (7ms)
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.8s

4. 위 테스트 사례에서 일반적으로 사용되는 몇 가지 Jest 어설션

Expect(functions.sum(2, 2)).toBe(4) 는 테스트 메서드를 래핑하는 Expect 함수를 제공합니다. 위의 toBe 함수는 일치자를 더 쉽게 만들 수 있도록 일련의 일치자를 포함하는 객체를 반환합니다. 여러 매처를 포함하는 일반적으로 사용되는 Jest 어설션 몇 가지를 소개하겠습니다.

.not

//functions.test.js
import functions  from &#39;../src/functions&#39;
test(&#39;sum(2, 2) 不等于 5&#39;, () => {
  expect(functions.sum(2, 2)).not.toBe(5);
})

.not 수정자를 사용하면 결과가 특정 값과 같지 않은 상황을 테스트할 수 있습니다. 이는 영어 구문과 거의 동일하며 이해하기 쉽습니다.

.toEqual()

// functions.js
export default {
  getAuthor() {
      return {
            name: &#39;LITANGHUI&#39;,      
            age: 24,
    }
  }
}

// functions.test.js
import functions  from &#39;../src/functions&#39;;
test(&#39;getAuthor()返回的对象深度相等&#39;, () => {
  expect(functions.getAuthor()).toEqual(functions.getAuthor());
})
test(&#39;getAuthor()返回的对象内存地址不同&#39;, () => {
  expect(functions.getAuthor()).not.toBe(functions.getAuthor());
})

.toEqual 매처는 객체의 모든 속성과 속성값이 동일한지 재귀적으로 확인하므로, 애플리케이션 유형을 비교하려면 .toBe 대신 .toEqual 매처를 사용하세요.

.toHaveLength

// functions.js
export default {
  getIntArray(num) {
      if (!Number.isInteger(num)) {
            throw Error(&#39;"getIntArray"只接受整数类型的参数&#39;);
    }
        let result = [];    
        for (let i = 0, len = num; i < len; i++) {
      result.push(i);
    }    
    return result;
  }
}

// functions.test.js
import functions  from &#39;../src/functions&#39;;
test(&#39;getIntArray(3)返回的数组长度应该为3&#39;, () => {
  expect(functions.getIntArray(3)).toHaveLength(3);
})

.toHaveLength는 문자열 및 배열 유형의 길이가 기대치를 충족하는지 테스트하는 데 편리하게 사용할 수 있습니다.

.toThrow

// functions.test.js
import functions  from &#39;../src/functions&#39;;
test(&#39;getIntArray(3.3)应该抛出错误&#39;, () => {
  function getIntArrayWrapFn() {
    functions.getIntArray(3.3);
  }
  expect(getIntArrayWrapFn).toThrow(&#39;"getIntArray"只接受整数类型的参数&#39;);
})

.toThorw를 사용하면 테스트 중인 메서드가 예상대로 예외를 throw하는지 테스트할 수 있지만, 이를 사용할 때 주의해야 할 점은 다음과 같습니다. 위와 같이 테스트 중인 함수를 래핑하는 함수를 사용해야 합니다. getIntArrayWrapFn이 이를 수행합니다. 그렇지 않으면 함수가 발생하기 때문에 어설션이 실패합니다.

.toMatch

// functions.test.js
import functions  from &#39;../src/functions&#39;;
test(&#39;getAuthor().name应该包含"li"这个姓氏&#39;, () => {
  expect(functions.getAuthor().name).toMatch(/li/i);
})

.toMatch는 문자열 유형의 정규 일치를 수행할 수 있는 정규식을 전달합니다.

5 비동기 함수 테스트

axios 설치
여기에서는 요청 처리를 위해 가장 일반적으로 사용되는 http 요청 라이브러리 axios를 사용합니다

npm install axios

http 요청 함수 작성
요청하겠습니다http://jsonplaceholder.typicode.com/users /1, 이것은 JSONPlaceholder

제스트란 무엇인가요? Jest의 기본 사용법 에서 제공하는 모의 요청 주소입니다.

JSONPlaceholder

// functions.js
import axios from &#39;axios&#39;;
export default {
  fetchUser() {
      return axios.get(&#39;http://jsonplaceholder.typicode.com/users/1&#39;)
      .then(res => res.data)
      .catch(error => console.log(error));
  }
}

// functions.test.js
import functions  from &#39;../src/functions&#39;;
test(&#39;fetchUser() 可以请求到一个含有name属性值为Leanne Graham的对象&#39;, () => {
  expect.assertions(1);  
  return functions.fetchUser()
    .then(data => {
      expect(data.name).toBe(&#39;Leanne Graham&#39;);
    });
})

위에서는 Expect.assertions(1)을 호출했는데, 이는 비동기 테스트 사례에서 어설션이 있음을 보장합니다. 콜백 함수. 이는 비동기 코드를 테스트할 때 매우 효과적입니다.

비동기 코드를 간소화하기 위해 async 및 Wait 사용

test(&#39;fetchUser() 可以请求到一个用户名字为Leanne Graham&#39;, async () => {
  expect.assertions(1);
    const data =  await functions.fetchUser();
  expect(data.name).toBe(&#39;Leanne Graham&#39;)
})

물론 Babel을 설치했으므로 비동기 테스트 코드를 간소화하기 위해 async 및 Wait 구문을 사용하는 것은 어떨까요? 하지만 Expect.assertions 메서드를 호출하는 것을 잊지 마세요.

위 내용은 제스트란 무엇인가요? Jest의 기본 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 jianshu.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Jest를 사용하여 JavaScript를 테스트하는 방법(Mock 함수)다음 기사：Jest를 사용하여 JavaScript를 테스트하는 방법(Mock 함수)