Giới thiệu về Kiểm tra snapshots với Jest

---

Một trong những tính năng chính của Jest là kiểm tra ảnh chụp nhanh; một công cụ rất hữu ích để viết các bài kiểm tra nhanh chóng, chính xác.

Tạo ảnh chụp nhanh

Giả sử bạn có một chức năng thực hiện thay đổi:

// changeMaker.js
export default function changeMaker(value) {
  let pennies = value * 100;
  const quarters = Math.floor(pennies / 25);
  pennies -= quarters * 25;
  const dimes = Math.floor(pennies / 10);
  pennies -= dimes * 10;
  const nickels = Math.floor(pennies / 5);
  pennies -= nickels * 5;
  return {
    quarters,
    dimes,
    nickels,
    pennies,
  };
}

Và bạn muốn kiểm tra nó, vì bạn là một lập trình viên giỏi và không muốn đẩy những đoạn mã chưa được kiểm tra. Bạn có thể viết nó là:

import changeMaker from './changeMaker';

it('gives proper change.', () => {
  expect(changeMaker(1.99)).toEqual({
    quarters: 7,
    dimes: 2,
    nickels: 0,
    pennies: 4,
  });
  expect(changeMaker(2.75)).toEqual({
    quarters: 11,
    dimes: 0,
    nickels: 0,
    pennies: 0,
  });
  expect(changeMaker(0.24)).toEqual({
    quarters: 0,
    dimes: 2,
    nickels: 0,
    pennies: 4,
  });
  // And so on
});

nhưng điều đó thật tẻ nhạt và bạn tiếp tục viết sai chính tả "nickels". Thay vào đó, bạn có thể sử dụng trình toMatchSnapshot khớp toMatchSnapshot của Jest:

import changeMaker from './changeMaker';

it('gives proper change.', () => {
  expect(changeMaker(1.99)).toMatchSnapshot();
  expect(changeMaker(2.75)).toMatchSnapshot();
  expect(changeMaker(0.24)).toMatchSnapshot();
  // And so on
});

Lần đầu tiên chạy thử nghiệm, nó sẽ tạo ra một ảnh chụp nhanh: một version tuần tự của đối tượng được đưa ra để expect . Trên tất cả các lần chạy tiếp theo, nó sẽ so sánh giá trị được cung cấp để expect cho ảnh chụp nhanh đó; nếu nó bằng nhau, kỳ vọng sẽ vượt qua, nếu không, bài kiểm tra không thành công.

Nếu bạn đang làm việc với Git, hãy nhớ đăng ký ảnh chụp nhanh của bạn! Chúng nằm trong folder __snapshots__ trong cùng folder với file thử nghiệm của bạn.

Cập nhật ảnh chụp nhanh

Thử nghiệm ảnh chụp nhanh bắt được những thay đổi không mong muốn, nhưng nếu bạn muốn một số thay đổi đó thì sao? Giống như nếu bạn muốn thêm một đồng xu:

export default function changeMaker(value) {
  let pennies = value * 100;
  const halfDollars = Math.floor(pennies / 50);
  pennies -= halfDollars * 50;
  const quarters = Math.floor(pennies / 25);
  pennies -= quarters * 25;
  const dimes = Math.floor(pennies / 10);
  pennies -= dimes * 10;
  const nickels = Math.floor(pennies / 5);
  pennies -= nickels * 5;
  return {
    halfDollars,
    quarters,
    dimes,
    nickels,
    pennies,
  };
}

Bây giờ các bài kiểm tra ảnh chụp nhanh của bạn không thành công. May mắn là Jest giúp bạn dễ dàng cập nhật những ảnh chụp nhanh này; chỉ cần vượt qua cờ -u :

$ yarn run test -- -u

Các ảnh chụp nhanh cũ, không thành công sẽ bị loại bỏ và các ảnh mới sẽ thay thế chúng.

---

---

Các tin liên quan