Jest 소개: 단위 테스트, 모의 및 비동기 코드-JS 튜토리얼-php.cn

Introduction to Jest: Unit Testing, Mocking, and Asynchronous Code

Jest 소개

Jest는 JavaScript 코드를 테스트하기 위한 라이브러리입니다.

Facebook에서 유지 관리하는 오픈 소스 프로젝트이며 React 코드 테스트에 특히 적합합니다. 하지만 이에 국한되지는 않습니다. 모든 JavaScript 코드를 테스트할 수 있습니다. 강점은 다음과 같습니다.

빠릅니다
스냅샷 테스트를 수행할 수 있습니다
독단적이며 선택을 요구하지 않고도 기본적으로 모든 것을 제공합니다.

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

로그인 후 복사

divide.test.js

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

로그인 후 복사

매처

매처는 값을 테스트할 수 있는 방법입니다.

toBe는 ===를 사용하여 엄격한 동등성을 비교합니다.
toEqual은 두 변수의 값을 비교합니다. 객체나 배열인 경우 모든 속성이나 요소가 동일한지 확인합니다
null 값을 전달할 때 toBeNull은 true입니다
toBeDefined는 정의된 값을 전달할 때 true입니다(위와 반대)
정의되지 않은 값을 전달하면 toBeUndefine이 true입니다.
toBeCloseTo는 부동 값을 비교하여 반올림 오류를 방지하는 데 사용됩니다
toBeTruthy 값이 true로 간주되면 true(if와 마찬가지로)
toBeFalsy 값이 false로 간주되면 true(if와 마찬가지로)
toBeGreaterThan Expect()의 결과가 인수보다 높으면 true
toBeGreaterThanOrEqual Expect()의 결과가 인수와 같거나 인수보다 높으면 true
toBeLessThan Expect()의 결과가 인수보다 낮으면 true
toBeLessThanOrEqual Expect()의 결과가 인수와 같거나 인수보다 낮으면 참
toMatch는 문자열을 정규식 패턴 일치와 비교하는 데 사용됩니다
toContain은 배열에 사용됩니다. 예상 배열의 요소 집합에 인수가 포함되어 있으면 true입니다.
toHaveLength(number): 배열의 길이를 확인합니다
toHaveProperty(key, value): 객체에 속성이 있는지 확인하고 선택적으로 해당 값을 확인합니다
toThrow는 전달한 함수가 예외(일반적으로) 또는 특정 예외를 발생시키는지 확인합니다
toBeInstanceOf(): 객체가 클래스의 인스턴스인지 확인합니다

종속성

종속성은 애플리케이션이 의존하는 코드 조각입니다. 프로젝트의 함수/객체이거나 타사 종속성(예: axios)일 수 있습니다.

코드 없이는 애플리케이션이 작동할 수 없을 때 코드 조각이 진정한 종속성이 됩니다.

예를 들어 이메일을 보내거나 API를 요청하거나 구성 개체를 구축하는 등의 기능을 애플리케이션에 구현하는 경우

js 프로젝트의 코드에 종속성을 추가할 수 있는 두 가지 방법이 있습니다.

수입품

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

로그인 후 복사

의존성 주입

단순한 개념에 화려한 용어를 붙인 것입니다.

함수에 외부 종속성의 일부 기능이 필요한 경우 해당 기능을 인수로 삽입하면 됩니다.

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

로그인 후 복사

단위 테스트

단위 테스트는 애플리케이션의 섹션('유닛'이라고 함)이 해당 디자인을 충족하고 의도한 대로 작동하는지 확인하기 위해 소프트웨어 개발자가 작성하고 실행합니다.

우리는 코드를 독립적으로 테스트하고 싶고 종속성의 실제 구현에는 관심이 없습니다.
확인하고 싶습니다

우리 코드 단위가 예상대로 작동하는지
예상된 결과를 반환합니다.
모든 협력자(종속성)를 호출합니다

여기서 우리의 의존성을 조롱하는 것이 중요합니다.

조롱

단위 테스트에서 모의 테스트는 종속성이 제공하는 기능을 스텁하는 기능과 코드가 종속성과 상호 작용하는 방식을 관찰하는 수단을 제공합니다.

모의는 테스트에 종속성을 직접 포함하는 것이 비용이 많이 들거나 비실용적일 때 특히 유용합니다. 예를 들어 코드가 API에 대한 HTTP 호출을 생성하거나 데이터베이스 계층과 상호작용하는 경우입니다.

필요에 따라 호출되는지 확인하면서 이러한 종속성에 대한 응답을 제거하는 것이 좋습니다. 여기서 모의가 유용합니다.

모의 함수를 사용하여 다음을 알 수 있습니다.

통화 횟수입니다.
각 호출에 사용되는 인수 값
각 호출의 “context” 또는 this 값.
함수가 어떻게 종료되었고 어떤 값이 생성되었는지.

농담으로 조롱하기

모의 함수를 만드는 방법에는 여러 가지가 있습니다.

jest.fn 메소드를 사용하면 새로운 모의 함수를 직접 생성할 수 있습니다.
객체 메소드를 모의하는 경우 jest.spyOn을 사용할 수 있습니다.
그리고 전체 모듈을 모의하고 싶다면 jest.mock을 사용할 수 있습니다.

jest.fn 메서드는 그 자체로 고차 함수입니다.

사용하지 않는 새로운 모의 함수를 생성하는 팩토리 메소드입니다.

JavaScript의 함수는 일급 시민이므로 인수로 전달될 수 있습니다.

각 모의 함수에는 몇 가지 특별한 속성이 있습니다. 모의 속성은 기본입니다. 이 속성은 함수가 호출된 방법에 대한 모든 모의 상태 정보를 포함하는 객체입니다. 이 객체에는 세 가지 배열 속성이 포함되어 있습니다.

통화 [각 통화의 인수]
인스턴스 [각 호출의 '이' 값]
Results [함수가 종료된 값], results 속성에는 유형(return 또는 throw)과 값이 있습니다.
- 함수는 명시적으로 값을 반환합니다.
- 함수는 return 문 없이 완료될 때까지 실행됩니다(이는 정의되지 않은 것을 반환하는 것과 동일함
- 함수에서 오류가 발생합니다.

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

로그인 후 복사

https://codesandbox.io/s/implementing-mock-functions-tkc8b

모의 기본

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

로그인 후 복사

주입된 종속성 모의

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

로그인 후 복사

모의 모듈

jest.fn으로 함수 모의

// Constructor Injection

// DatabaseManager class takes a database connector as a dependency
class DatabaseManager {
    constructor(databaseConnector) {
        // Dependency injection of the database connector
        this.databaseConnector = databaseConnector;
    }

    updateRow(rowId, data) {
        // Use the injected database connector to perform the update
        this.databaseConnector.update(rowId, data);
    }
}

// parameter injection, takes a database connector instance in as an argument; easy to test!
function updateRow(rowId, data, databaseConnector) {
    databaseConnector.update(rowId, data);
}

로그인 후 복사

이런 유형의 조롱은 다음과 같은 몇 가지 이유로 덜 일반적입니다.

jest.mock은 모듈의 모든 기능에 대해 이 작업을 자동으로 수행합니다
jest.spyOn은 동일한 작업을 수행하지만 원래 기능을 복원할 수 있습니다

jest.mock으로 모듈 모의

더 일반적인 접근 방식은 jest.mock을 사용하여모듈의 모든 내보내기를 모의 함수로 자동 설정하는 것입니다.

// 1. The mock function factory
function fn(impl = () => {}) {
  // 2. The mock function
  const mockFn = function(...args) {
    // 4. Store the arguments used
    mockFn.mock.calls.push(args);
    mockFn.mock.instances.push(this);
    try {
      const value = impl.apply(this, args); // call impl, passing the right this
      mockFn.mock.results.push({ type: 'return', value });
      return value; // return the value
    } catch (value) {
      mockFn.mock.results.push({ type: 'throw', value });
      throw value; // re-throw the error
    }
  }
  // 3. Mock state
  mockFn.mock = { calls: [], instances: [], results: [] };
  return mockFn;
}

로그인 후 복사

jest.spyOn을 사용하여 함수를 감시하거나 모의합니다.

메서드 호출만 보고 싶지만 원래 구현은 유지하고 싶은 경우도 있습니다. 구현을 모의하고 싶을 수도 있지만 나중에 제품군에서 원본을 복원하세요.

test("returns undefined by default", () => {
  const mock = jest.fn();

  let result = mock("foo");

  expect(result).toBeUndefined();
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledTimes(1);
  expect(mock).toHaveBeenCalledWith("foo");
});

로그인 후 복사

원래 구현 복원

const doAdd = (a, b, callback) => {
  callback(a + b);
};

test("calls callback with arguments added", () => {
  const mockCallback = jest.fn();
  doAdd(1, 2, mockCallback);
  expect(mockCallback).toHaveBeenCalledWith(3);
});

로그인 후 복사

자바스크립트와 이벤트 루프

JavaScript는 단일 스레드입니다. 한 번에 하나의 작업만 실행할 수 있습니다. 보통은 별 문제가 아니지만 이제 30초가 걸리는 작업을 실행한다고 상상해 보세요. 예.. 해당 작업 중에 다른 일이 발생하기 전에 30초를 기다립니다(JavaScript는 기본적으로 브라우저의 메인 스레드에서 실행됩니다. 그래서 전체 UI가 멈췄습니다).
2020년, 느리고 응답이 없는 웹사이트를 원하는 사람은 아무도 없습니다.

다행히도 브라우저는 JavaScript 엔진 자체가 제공하지 않는 몇 가지 기능, 즉 웹 API를 제공합니다. 여기에는 DOM API, setTimeout, HTTP 요청 등이 포함됩니다. 이는 비동기, 비차단 동작
을 생성하는 데 도움이 될 수 있습니다.

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

로그인 후 복사

콜 스택 - 함수를 호출하면 호출 스택이라는 항목에 추가됩니다.
WebAPI - setTimeout은 WebAPI에서 제공되며 콜백 기능을 사용하고 메인 스레드를 차단하지 않고 타이머를 설정합니다
큐 - 타이머가 끝나면 콜백이 큐에 추가됩니다
이벤트 루프 - 콜스택이 비어 있는지 확인하고, 큐에 실행할 콜백이 있는지 확인하여 실행할 콜스택으로 이동합니다.

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

로그인 후 복사

Jest로 비동기 코드 테스트하기

Jest는 일반적으로 테스트 기능을 동기적으로 실행할 것으로 예상합니다.

비동기 작업을 수행하지만 테스트가 끝날 때까지 기다려야 한다는 사실을 Jest에 알리지 않으면 거짓 긍정이 발생합니다.

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

로그인 후 복사

비동기 패턴
JavaScript에는 비동기 작업을 처리하기 위한 몇 가지 패턴이 있습니다. 가장 많이 사용되는 것은 다음과 같습니다.

콜백
약속 및 비동기/대기

콜백 테스트

Jest가 테스트를 실행하지 않기 때문에 콜백에서 테스트를 가질 수 없습니다. 콜백이 호출되기 전에 테스트 파일의 실행이 종료됩니다. 이 문제를 해결하려면 테스트 함수에 매개변수를 전달하면 편리하게 완료를 호출할 수 있습니다. Jest는 테스트를 종료하기 전에 done()을 호출할 때까지 기다립니다.

// Constructor Injection

// DatabaseManager class takes a database connector as a dependency
class DatabaseManager {
    constructor(databaseConnector) {
        // Dependency injection of the database connector
        this.databaseConnector = databaseConnector;
    }

    updateRow(rowId, data) {
        // Use the injected database connector to perform the update
        this.databaseConnector.update(rowId, data);
    }
}

// parameter injection, takes a database connector instance in as an argument; easy to test!
function updateRow(rowId, data, databaseConnector) {
    databaseConnector.update(rowId, data);
}

로그인 후 복사

약속

Promise를 반환하는 함수를 사용하여 테스트에서 Promise를 반환합니다.

// 1. The mock function factory
function fn(impl = () => {}) {
  // 2. The mock function
  const mockFn = function(...args) {
    // 4. Store the arguments used
    mockFn.mock.calls.push(args);
    mockFn.mock.instances.push(this);
    try {
      const value = impl.apply(this, args); // call impl, passing the right this
      mockFn.mock.results.push({ type: 'return', value });
      return value; // return the value
    } catch (value) {
      mockFn.mock.results.push({ type: 'throw', value });
      throw value; // re-throw the error
    }
  }
  // 3. Mock state
  mockFn.mock = { calls: [], instances: [], results: [] };
  return mockFn;
}

로그인 후 복사

비동기/대기

Promise를 반환하는 함수를 테스트하기 위해 async/await를 사용할 수도 있습니다. 이는 구문을 매우 간단하고 간단하게 만듭니다.

test("returns undefined by default", () => {
  const mock = jest.fn();

  let result = mock("foo");

  expect(result).toBeUndefined();
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledTimes(1);
  expect(mock).toHaveBeenCalledWith("foo");
});

로그인 후 복사

팁

우리는 우리의 기능이 무엇인지, 그리고 무엇을 테스트하려고 하는지 잘 이해해야 합니다
테스트 중인 코드의 동작에 대해 생각해 보세요
무대 설정:
- 모든 종속성에 대한 모의/스파이
- 우리 코드가 전역 개체와 상호 작용하고 있나요? 우리도 그들을 조롱하거나 염탐할 수 있습니다
- 테스트가 DOM과 상호작용하고 있나요? 작업할 가짜 요소를 만들 수 있습니다
- 테스트 구조화
- 주어...
- 내가 전화할 때....
- 그럼..예상합니다.....

const doAdd = (a, b, callback) => {
  callback(a + b);
};

test("calls callback with arguments added", () => {
  const mockCallback = jest.fn();
  doAdd(1, 2, mockCallback);
  expect(mockCallback).toHaveBeenCalledWith(3);
});

로그인 후 복사