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);
});

???

• https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c
• https://jestjs.io/docs/en/mock-functions
• https://codesandbox.io/s/implementing-mock-functions-tkc8b
• https://github.com/BulbEnergy/jest-mock-examples
• https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
• https://jestjs.io/docs/en/asynchronous
• https://www.pluralsight.com/guides/test-asynchronous-code-jest

? ??? Jest ??: ?? ???, ?? ? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!