how test react apps using jest framework
이 비디오 튜토리얼에서는 Jest를 사용하여 React App을 만들고 테스트하는 방법, Jest를 사용하여 Mocking 및 Jest spyOn 명령을 사용하여 Spying 기능을 테스트하는 방법을 배웁니다.
에 Jest의 완전한 소개 이전 튜토리얼에서 제공되었습니다. 이 튜토리얼에서는 React 기반 앱을 테스트하기 위해 Jest를 사용하는 방법을 살펴 봅니다.
간단한 방법을 사용하여 부트 스트랩 된 React 앱을 만드는 방법을 배웁니다. 해발 기반 명령을 사용하고 Jest 반응 테스트를 작성하는 데 동일한 앱을 사용합니다. 또한 스냅 샷 테스트의 개념을 탐색하고 Jest 프레임 워크 및 Jest spyon 명령을 사용하여 React 구성 요소를 모의 및 감시하는 방법을 알아 봅니다.
학습 내용 :
React – 시작하기
Jest는 다른 모든 JavaScript 프레임 워크에 대한 지원과 함께 React 앱을 광범위하게 테스트하기 위해 구축되었습니다.
React 앱을 사용하여 Jest 프레임 워크와 테스트를 추가 할 것이므로 React 앱에 대한 기본적인 이해를 갖추는 것은 필수적이며 실제로 전제 조건입니다.
기본 React 앱을 시작하려면 다음 단계를 따르십시오.
#1) React 앱을 만들려면 노드 패키지 실행기 (즉, npm과 함께 제공되는 npx)를 사용하고 아래 명령을 실행하면됩니다.
npx create-react-app my-app
#두) 위의 명령이 완료되면 원하는 편집기에서 my-app 프로젝트를 엽니 다. 무료로 사용할 수있는 Visual Studio Code를 사용하는 것이 좋습니다.
#삼) 터미널 / 명령 창 (편집기 내부)에서 아래 명령을 사용하여 프로젝트를 실행합니다.
npm start
# 4) 프로젝트가 컴파일되면 URL이 http : // localhost : 3000 인 새 브라우저 탭이 열립니다.
# 5) 또한 모든 Jest 관련 종속성은 위에서 언급 한 npx 명령을 사용하여 생성 된 React 프로젝트의 일부로 설치됩니다.
# 6) 이 프로젝트에는 Jest에 유용한 사용자 정의 DOM 요소 매 처가 많이있는 jest-dom이라는 React 테스트 라이브러리도 포함되어 있습니다. (검사 여기 React 개념에 대한 자세한 내용은)
스냅 샷 테스트가 있습니다.
스냅 샷 테스트는 Jest 라이브러리를 사용하여 React 컴포넌트 스냅 샷을 테스트하는 데 매우 유용한 기술입니다.
먼저 어떤 스냅 샷 테스트를 이해하려고 본질적으로 의미합니다.
스냅 샷은 그 어떤 것의 시점 표현 일뿐입니다. 예를 들면 스크린 샷, 카메라 사진 등은 모두 특정 시점에 대한 세부 정보를 나타내는 스냅 샷입니다.
React의 관점에서 Snapshot은 제공된 상태 및 동작이있는 React 구성 요소의 시점 표현 또는 출력 일뿐입니다.
아래 단계를 사용하여 간단한 예를 들어 설명합니다.
#1) 스냅 샷 테스트를 시작하려면 아래 명령을 사용하여 npm 패키지“react-test-renderer”를 추가하십시오.
npm i react-test-renderer
#두) 이제 테스트중인 애플리케이션이 될 간단한 React 구성 요소를 만들어 보겠습니다. 이 구성 요소는 클래스 변수 및 페이지 속성의 형태로 간단한 상태를 갖습니다.
구성 요소는 아래와 같이 보입니다. 이 구성 요소의 이름을 Link로 지정하겠습니다 (따라서 해당 반응 구성 요소 파일 이름은 Link.react.js가됩니다).
import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.page} {this.state.welcomeMessage} ); } }
이때 파일 구조가 React 프로젝트를 찾는 방법입니다.
#삼) 이 구성 요소에 대한 스냅 샷 테스트를 추가해 보겠습니다.
에) 스냅 샷 테스트를 시작하려면 – react-test-renderer 노드 패키지가 전제 조건입니다. 설치 반응 노드 렌더러 아래 명령을 사용하십시오.
npm i react-test-renderer
비) 이 새 구성 요소에 대한 테스트를 추가하기위한 새 파일을 추가합니다. 이름을 지정하겠습니다. Link.test.js
씨) 이제 스냅 샷 테스트를 추가하십시오. 여기서는 먼저 React 컴포넌트를 렌더링하여 스냅 샷을 생성합니다.
테스트는 아래와 같습니다.
import React from 'react'; import Link from './Link.react' import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create() .toJSON(); console.log(tree) expect(tree).toMatchSnapshot(); });
여기 테스트에서는 렌더링 된 구성 요소의 JSON 표현을 만듭니다. 'page'속성 값을 'www.softwaretestinghelp.com'으로 전달했습니다.
디) 스냅 샷 테스트가 실행되면 구성 요소의 스냅 샷 파일이 생성됩니다 (확장자 .스냅 ) 및 다음 테스트 실행 중에 재사용되는 프로젝트 디렉토리에 저장됩니다.
이 경우 테스트 중에 제공된 페이지 속성이있는 스냅 샷 파일이 사용됩니다. 'npm test'명령을 사용하여 테스트를 실행 한 후 생성되는 스냅 샷 파일을 살펴 보겠습니다.
이다) 프로젝트 src 디렉토리의 '__snapshots__'디렉토리 아래에 스냅 샷 파일이 생성됩니다.
애니메이션을 무료로 볼 수있는 좋은 웹 사이트
이에 대한 프로젝트 구조는 다음과 같습니다.
위 스크린 샷의“__snapshots__”디렉터리는 테스트가 처음 실행될 때 프로젝트 루트 디렉터리에 생성됩니다.
에프) 스냅 샷 파일이 어떻게 생겼는지 보겠습니다.
파일 열기 – Link.test.js.snap
지) 위에 표시된 것은 주어진 구성 요소에 대해 저장되는 스냅 샷입니다.
h) 예를 들어 위 구성 요소의 구현이 변경되었습니다. 예를 들면 속성 페이지의 이름을 구성 요소의 사이트로 변경하고 테스트를 다시 실행 해 보겠습니다.
구성 요소가 변경되는 방식입니다 (페이지라는 속성을 site라는 새 속성으로 변경했습니다).
import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.site} {this.state.welcomeMessage} ); } }
이제 테스트를 다시 실행 해 보겠습니다. 이미 프로젝트 디렉토리에 스냅 샷이 있으므로이 시나리오에서는 테스트가 실패 할 것으로 예상됩니다. 구성 요소 코드가 변경되고 이전 스냅 샷 일치가 실패 할 것입니다.
다음은 테스트를 실행하는 동안 얻은 결과입니다.
(나는) 이제 이러한 변경 사항이 필수 변경 사항이며 테스트에서 이전 스냅 샷을 업데이트해야한다고 가정 해 보겠습니다. 이 경우 이전 스냅 샷을 덮어 쓰고 구성 요소 자체의 새로운 변경 사항을 기반으로 새 스냅 샷을 만드는 update 명령으로 테스트를 실행합니다.
명령 실행
yarn test -u
(제이) 위의 명령과 업데이트 된 어설 션을 사용하면 테스트가 통과 된 것을 볼 수 있습니다.
따라서 전체 스냅 샷 테스트는 최종보기에 대해 전체 구성 요소를 테스트하고 이전 결과를 스냅 샷으로 저장하는 데 유용한 기술입니다. 이는 코드 변경이나 기능 또는 리팩토링의 결과로 회귀 문제가 발생하지 않도록 보장합니다. 기존 구성 요소에.
비디오 자습서 : 스냅 샷 테스트가 있습니다.
Jest를 사용하여 조롱
이 섹션에서는 Jest 모의를 사용하는 방법을 살펴 보겠습니다. 모의는 아래와 같이 다양한 방법으로 사용될 수 있습니다.
예를 들면
- 전체 React 구성 요소 조롱
- 단일 또는 다중 함수 모의-이것은 Javascript 개발 프레임 워크에만 국한되지 않습니다. Jest는 특정 프레임 워크에 국한되지 않는 자바 스크립트 테스트 라이브러리이므로 Jest를 사용하여 함수가 포함 된 평범한 오래된 자바 스크립트 파일을 모의 할 수도 있습니다.
- 함수 또는 자바 스크립트 코드 내에서 사용되는 모의 API 호출 – Jest를 사용하여 타사 통합의 응답을 모의 할 수 있습니다.
이러한 각 조롱 방법에 대해 자세히 살펴 보겠습니다.
React 컴포넌트 모의
React App은 서로 의존하는 여러 구성 요소로 구성됩니다. 이해를 간단하게하기 위해 React Component를 클래스로 고려하십시오. 프레젠테이션과 로직이 있습니다.
Object Oriented Programming을 사용하여 구축 된 복잡한 시스템과 마찬가지로 여러 클래스로 구성되어 있습니다. 마찬가지로 React App은 구성 요소 모음입니다.
이제 컴포넌트를 테스트 할 때 테스트에 영향을 미치는 종속성이 없는지 확인하고 싶을 것입니다. 즉, 테스트중인 컴포넌트가 종속 된 2 개의 컴포넌트가있는 경우 종속 컴포넌트를 모의 할 수단이있는 경우 그런 다음 더 완전한 방식으로 테스트중인 구성 요소를 단위 테스트 할 수 있습니다.
아래 그림의 도움으로 이것을 이해해 보겠습니다.
여기에 Component2와 3에 종속 된 Component1이 있습니다.
Component1을 단위 테스트하는 동안 Jest Mocks를 사용하여 Component2 및 Component3을 가짜 또는 모의 된 것으로 대체 할 수 있습니다.
이 모형을 설정하는 방법을 살펴 보겠습니다. div 안에 배치 된 Html 텍스트와 함께 간단한 구성 요소를 사용합니다. 먼저 종속 구성 요소에 대한 코드를 볼 것입니다. Component2 및 Component3 .
import React, { Component} from 'react' class Component2 extends Component { render() { return( Hello Component2 ) } } export default Component2
import React, { Component} from 'react' class Component3 extends Component { render() { return( Hello Component3 ) } } export default Component3
이제 종속 구성 요소가있는 Component1이 어떻게 생겼는지 살펴 보겠습니다. 여기에서 종속 구성 요소를 가져 와서 &와 같은 간단한 HTML 태그로 사용하고 있음을 알 수 있습니다.
import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1
이제이 구성 요소에 대한 테스트를 작성하는 방법을 살펴 보겠습니다. 테스트를 만들려면 'src'디렉토리에 'tests'폴더를 만듭니다. 이것은 우리의 프로젝트 디렉토리가 깨끗하고 체계적으로 유지되도록하기위한 것입니다.
import React, {Component} from 'react' import {render, container} from '@testing-library/react' import Component1 from '../components/component1' // arrange - mock setup jest.mock('../components/component2', () => () => Hello Mock Component2 ) jest.mock('../components/component3', () => () => Hello Mock Component3 ) describe('mock component tests', () => { test('mocked components in react', () => { // act const {container} = render() // assert console.log(container.outerHTML) const mockComponent2 = container.querySelector('div#mockComponent2') const mockComponent3 = container.querySelector('div#mockComponent3') expect(mockComponent2).toBeInTheDocument() expect(mockComponent3).toBeInTheDocument() }) })
위의 테스트 파일에서 함수를 사용하여 Components1 & 2를 모의 한 것을 볼 수 있습니다. is.mock
jest.mock('../components/component2', () => () => Hello Mock Component2 )
이 설정은 단순히 Component2의 모든 호출을이 모의 표현으로 대체합니다. 따라서 테스트에서 Component1을 렌더링 할 때, 문서에 Mock div 요소가 있는지 확인하여 확인한 Component2의 모의 버전을 호출합니다.
여기서는‘toBeInTheDocument () 매처를 사용했습니다. 이 매처는 React 애플리케이션의 최종 렌더링 출력이 HTML 코드에 불과하기 때문에 React 전용입니다. 따라서이 매처는 React가 생성 한 HTML 문서에 존재하는 주어진 HTML 요소를 찾습니다.
비디오 튜토리얼 : Jest – Mock React Components
Jest를 사용한 조롱 함수
이제 Jest 모의를 사용하여 주어진 JavaScript 파일에 대한 특정 함수를 모의하는 방법을 살펴 보겠습니다.
위의 그림에서 function1의 종속성 인 function 2를 함수 2의 stubb / mocked 버전으로 대체하고 있음을 알 수 있습니다.
먼저 테스트중인 응용 프로그램으로 사용할 테스트 JavaScript 파일을 만들고 모의 함수 개념을 설명하기 위해 몇 가지 메서드를 모의합니다.
function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}
여기에는 greet () 및 getFullName ()이라는 두 가지 함수가 있습니다. greet () 함수는 getFullName ()을 사용하여 전체 이름을 얻습니다. greet () 메서드를 테스트하는 동안 getFullName () 함수를 모의 구현으로 대체하는 방법을 살펴 보겠습니다.
Jest 모의 함수를 사용하여이 동작을 모의하는 간단한 테스트를 작성하고 모의 함수가 호출되었는지 여부를 검증하는 방법을 살펴 보겠습니다.
test('illustrate mocks', () => { // arrange const mock = jest.fn().mockReturnValue('mocked name') const greeter = require('../app.js') greeter.getFullName = mock // act const result = greeter.greet('aman', 'kumar') // assert expect(result).toBe('Hello! mocked name') expect(mock).toHaveBeenCalled() expect(mock).toHaveBeenCalledTimes(1) expect(mock).toHaveBeenCalledWith('aman','kumar') })
여기에서 Jest 모의 함수를 선언하고 함수가 호출 될 때 반환되는 반환 값을 '모의 이름'으로 설정했습니다.
const mock = jest.fn().mockReturnValue('mocked name')
또한 모의가 호출되었는지 확인하기 위해 아래와 같이 Jest 매처를 사용할 수 있습니다.
- toHaveBeenCalled () – 모의가 호출되었는지 확인합니다.
- toHaveBeenCalledWith (arg1, arg2) – 주어진 인수를 사용하여 모의 객체가 호출되었는지 확인합니다.
- toHaveBeenCalledTimes (n) – Mock이 호출되었을 횟수를 검증합니다.
Jest에는 스파이라는 또 다른 기능이 있습니다.
그렇다면 스파이는 무엇이며 모의와 어떻게 다릅니 까?
대부분의 경우 Spies는 실제 함수 호출을 허용하지만 메서드를 호출하는 데 사용 된 인수와 같은 것을 확인하고 메서드 호출이 발생했는지 여부를 확인하는 데 사용할 수 있습니다.
Jest에서 스파이는 다음을 통해 수행 할 수 있습니다. 스파이 온이 있습니다 명령. Jest spyOn은 인수를 객체로 취하고 실제 함수를 감시합니다. 즉, 실제로 테스트중인 함수를 호출하고 중간 인터셉터로 작동합니다.
test('illustrate spy', () => { // arrange const greeter = require('../app.js') const getFullNameSpy = jest.spyOn(greeter, 'getFullName') // act const result = greeter.greet('aman', 'kumar') // assert expect(getFullNameSpy).toHaveBeenCalled() expect(result).toBe('Hello! aman kumar') expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') })
따라서 위의 코드에서 다음을 관찰 할 수 있습니다.
(나는) 아래 명령을 사용하여 'getFullName'메소드에 대한 스파이를 설정했습니다.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName')
(ii) 주장에서 우리는 스파이가 예상되는 인수로 호출되었는지 확인하고 있습니다.
expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar')
Jest spyOn 명령을 사용하여 아래 명령을 사용하여 실제 함수 대신 호출해야하는 모의 구현을 지정할 수도 있습니다.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()
이 경우 실제 함수 호출은 스파이로 설정된 모의 구현으로 대체됩니다.
비디오 자습서 : Jest- Mock Api 함수
Jest를 사용하여 외부 API 호출 조롱
아래 그림에서 function1이 외부 API 엔드 포인트를 호출하는 것을 볼 수 있습니다. 예를 들면 – 성공 또는 실패 응답을 제공하는 지불 파트너 엔드 포인트 호출.
이제이 함수에 대한 단위 테스트를 작성할 때 테스트가 실행될 때마다 외부 엔드 포인트를 호출 할 것으로 예상 할 수 없습니다.
테스트에서 외부 엔드 포인트를 호출하지 않는 데에는 몇 가지 이유가 있습니다.
- 비용이 포함될 수 있습니다.
- 그 반응은 통제 할 수 없습니다. 예상되는 모든 응답 및 오류 코드를 항상 테스트 할 수는 없습니다.
- 항상 사용할 수있는 것은 아닙니다. 외부 엔드 포인트를 사용할 수 없으면 테스트 결과가 불안정 해집니다.
이러한 모든 이유로 외부 엔드 포인트의 동작을 제어 및 스텁하고 함수에 대한 강력한 단위 테스트를 만들 수 있다면 매우 유용 할 것입니다.
Jest 프레임 워크를 사용하여 모의 API 호출을 수행하는 방법을 살펴 보겠습니다. Axios는 아래 명령을 사용하여 프로젝트에 다운로드 / 추가 할 수있는 NPM 모듈입니다.
npm install --save-dev axios
아래 그림과 같이 'axios'모듈을 사용하여 테스트 함수에서 API를 호출합니다.
swf 파일을 어떻게 열지
function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); }
가짜 데이터를 반환하고 성공 및 오류 응답을 기록하는 더미 외부 끝점에 도달했습니다.
이제 단위 테스트에서 axios 모듈을 모의하고 함수가이 외부 끝점을 호출 할 때 가짜 또는 모의 응답을 반환합니다.
테스트 코드는 아래와 같습니다.
const axios = require('axios') jest.mock('axios'); describe('mock api calls', () => { test('mocking external endpoint in axios', () => { // arrange const mockedResponse = {data: {username:'test-user', address:'India'}} axios.get.mockResolvedValue(mockedResponse) const app = require('../app.js') // act app.getUserData() // asserts expect(axios.get).toHaveBeenCalled() expect(axios.get).toHaveBeenCalledWith('https://reqres.in/api/users/2') }) })
여기서는 전체 'axios'모듈을 조롱한다는 것을 이해하는 것이 중요합니다. 즉, 테스트 실행 중에 Axios 모듈로 이동하는 모든 호출은 모의 구현으로 이동하고 테스트에서 구성된대로 응답을 반환합니다.
모듈은 아래 명령을 사용하여 모의됩니다.
const axios = require('axios') jest.mock('axios');
아래 명령을 사용하여 모의 객체를 구성했습니다.
axios.get.mockResolvedValue(mockedResponse)
이러한 방식으로 외부 API 엔드 포인트의 응답을 모의 처리 할 수 있습니다. 여기서는 'GET'엔드 포인트를 사용했지만 POST, PUT 등과 같은 다른 엔드 포인트에도 동일한 접근 방식을 사용할 수 있습니다.
비디오 자습서 : Jest-Mock Api Endpoints
결론
이 튜토리얼에서 우리는 간단한 React 앱을 만드는 방법을 배웠고, React 컴포넌트 전체에서 Snapshot 테스트를 수행하고 React 컴포넌트 전체를 모의하는 데 Jest React를 사용하는 방법을 살펴 보았습니다.
또한 메서드의 실제 구현을 호출하고 호출 수, 메서드가 호출 된 인수 등과 같은 것을 주장하는 인터셉터 역할을하는 Jest spyOn 명령을 사용하여 Jest 및 Spying 함수를 사용하는 Mocking에 대해서도 살펴 보았습니다.
이전 튜토리얼 | NEXT 튜토리얼
추천 도서
- Jest 자습서-Jest Framework를 사용한 JavaScript 단위 테스트
- Jest 구성 및 Jest 기반 테스트 디버깅
- 자동화 테스트를위한 25 가지 최고의 Java 테스트 프레임 워크 및 도구 (3 부)
- Node.js 테스트 프레임 워크 설정 방법 : Node.js 자습서
- JUnit 프레임 워크 소개 및 Selenium 스크립트에서의 사용법 – Selenium Tutorial # 11
- Jasmine Jquery와 예제를 포함한 Jasmine 프레임 워크 자습서
- JCF (Java Collections Framework) 자습서