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);
});
매처는 값을 테스트할 수 있는 방법입니다.
종속성은 애플리케이션이 의존하는 코드 조각입니다. 프로젝트의 함수/객체이거나 타사 종속성(예: 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 호출을 생성하거나 데이터베이스 계층과 상호작용하는 경우입니다.
필요에 따라 호출되는지 확인하면서 이러한 종속성에 대한 응답을 제거하는 것이 좋습니다. 여기서 모의가 유용합니다.
모의 함수를 사용하여 다음을 알 수 있습니다.
모의 함수를 만드는 방법에는 여러 가지가 있습니다.
jest.fn 메서드는 그 자체로 고차 함수입니다.
사용하지 않는 새로운 모의 함수를 생성하는 팩토리 메소드입니다.
JavaScript의 함수는 일급 시민이므로 인수로 전달될 수 있습니다.
각 모의 함수에는 몇 가지 특별한 속성이 있습니다. 모의 속성은 기본입니다. 이 속성은 함수가 호출된 방법에 대한 모든 모의 상태 정보를 포함하는 객체입니다. 이 객체에는 세 가지 배열 속성이 포함되어 있습니다.
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);
});
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
// 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을 사용하여모듈의 모든 내보내기를 모의 함수로 자동 설정하는 것입니다.
// 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;
}
메서드 호출만 보고 싶지만 원래 구현은 유지하고 싶은 경우도 있습니다. 구현을 모의하고 싶을 수도 있지만 나중에 제품군에서 원본을 복원하세요.
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;
}
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에 알리지 않으면 거짓 긍정이 발생합니다.
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");
});
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);
});
위 내용은 Jest 소개: 단위 테스트, 모의 및 비동기 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
