Thử nghiệm javascript

Trong ngành Công nghệ thông tin (CNTT) kiểm tra có nghĩa là mã kiểm tra của chúng tôi có đáp ứng kỳ vọng hay không. Ví dụ. một hàm có tên là Tổng sẽ trả về kết quả được phép tính cộng một dãy số được người dùng nhập vào

Có nhiều loại Kiểm tra và mê mẩn mấy bạn sẽ bị choáng bởi thuật ngữ này, nhưng kiểm tra có ba loại chính

• Kiểm tra đơn vị
• Thử nghiệm hội nhập
• Kiểm tra giao diện người dùng

Trong hướng dẫn sử dụng Jest lần này, sẽ đề cập đến Kiểm thử đơn vị

Jest là gì?

Jest là một thư viện JavaScript để tạo, chạy và cấu trúc kiểm tra. Jest được phân phối dưới dạng NPM, bạn có thể cài đặt nó trong bất kỳ dự án JavaScript nào. Jest là một trong những thư viện kiểm tra biến phổ biến nhất hiện nay và là lựa chọn mặc định cho việc tạo App React

Điều kiện đầu tiên. Làm thế nào để biết phải kiểm tra cái gì?

Khi nói đến thử nghiệm , ngay cả một đoạn mã đơn giản cũng có thể làm tê liệt người mới bắt đầu. Câu hỏi phổ biến nhất là "Làm thế nào để biết phải kiểm tra cái gì?".  

Nếu bạn đang viết một Ứng dụng web, bạn sẽ kiểm tra mọi trang của Ứng dụng và mọi tương tác của người dùng. Nhưng các ứng dụng Web cũng được tạo thành từ các đoạn mã như hàm(hàm) và mô-đun(mô-đun) cũng cần được kiểm tra. Có hai trường hợp thông thường

• Thừa hưởng đoạn mã mà không cần kiểm tra
• Phải thực hiện một chức năng mới

Phải làm sao đối đầu với cả hai trường hợp, bạn có thể tự giúp mình bằng cách nghĩ về các bài kiểm tra như các bit của chức năng xem bài kiểm tra có trả về kết quả như mong muốn hay không. Đây là cách diễn ra flow-test

1. Select function to testing
2. Nhập giá trị đầu vào ( input )
3. Xác định những gì mong đợi là đầu ra (đầu ra)
4. Kiểm tra chức năng xem có trả về đầu ra mong muốn không

Flow-test đã diễn ra như vậy. Việc kiểm tra sẽ không còn đáng sợ nữa nếu bạn nghĩ theo các thuật ngữ sau. đầu vào (đầu vào) – đầu ra dự kiến ​​(đầu ra dự kiến) – khẳng định kết quả (khẳng định kết quả). Trong một phút, chúng ta cũng sẽ tìm thấy một công cụ tiện dụng để kiểm tra gần như chính xác những gì cần kiểm tra. Và đó là Jest

Thiết lập dự án NodeJS

Như mọi dự án JavaScript, bạn cần có một NPM môi trường (đảm bảo đã cài đặt Node trên hệ thống của bạn). Tạo một thư mục mới và khởi động dự án với

mkdir getting-started-with-jest && cd $_
npm init -y

Tiếp theo cài đặt Jest with

npm i jest --save-dev

Chúng ta cũng hãy cấu hình tập lệnh NPM để kiểm tra từ dòng lệnh. Mở gói. json và cấu hình có tên “kiểm tra” để chạy Jest

  "scripts": {
    "test": "jest"
  },

Thông số kỹ thuật (Thông số kỹ thuật)  và phát triển hướng kiểm tra (phát triển dựa trên thử nghiệm) NodeJS

Trong hướng dẫn này, chúng tôi đã có thông số kỹ thuật khá đơn giản từ người quản lý dự án (quản lý dự án). Máy khách cần một hàm JavaScript sẽ tạo một mảng các đối tượng

Theo mặc định, Jest project(expected ) sẽ tìm thấy các tệp kiểm tra trong thư mục tên là kiểm tra  trong thư mục dự án. Create new directory after that

cd getting-started-with-jest
mkdir __tests__

Tiếp theo, tạo một tệp có tên là filterByTerm. thông số kỹ thuật. js bên trong kiểm tra. In sao có phần mở rộng “. thông số kỹ thuật. ”. That is a permissions from Ruby

Và bây giờ chúng ta test nào

Cấu hình kiểm thử cấu trúc và kiểm thử thất bại lần đầu

Để tạo đoạn kiểm tra Jest first. Open set loc ByTerm. thông số kỹ thuật. js và tạo khối kiểm tra

describe("Filter function", () => {
  // test stuff
});

Mô tả là phần mô tả, một phương pháp Jest để chứa một hoặc nhiều bài kiểm tra liên quan. Mỗi khi bạn bắt đầu viết bài kiểm tra cho một chức năng, hãy viết trong phần mô tả. Như bạn có thể thấy, nó cần hai đối số. a string to description test and functions

Tiếp theo, một chức năng khác được gọi là kiểm tra , đó là giai đoạn kiểm tra thực tế

describe("Filter function", () => {
  test("it should filter by a search (link)", () => {
    //  test thực tế
  });
});

Tại thời điểm này, chúng tôi sẽ viết bài kiểm tra. Hãy nhớ rằng, kiểm tra là một vấn đề của đầu vào, chức năng và đầu ra dự kiến. Trước tiên hãy xác định đầu vào, mảng của các đối tượng

describe("Filter function", () => {
  test("it should filter by a search  (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];
  });
});

Tiếp theo, chúng tôi sẽ xác định kết quả mong đợi. Theo thông số kỹ thuật, các chức năng được kiểm tra sẽ loại bỏ các đối tượng có url thuộc tính không khớp với cụm từ tìm kiếm đã cho. Ví dụ, chúng ta có thể mong đợi mảng với các đối tượng, được đưa ra “liên kết” làm thuật ngữ tìm kiếm mong đợi

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];
    const output = [{ id: 3, url: "https://www.link3.dev" }];
  });
});

Và bây giờ chúng ta đã sẵn sàng để viết bài tes thực tế. Sẽ sử dụng  mong đợi và đối sánh Jest để kiểm tra xem hàm giả tưởng (hiện tại) của chúng ta có trả về kết quả mong đợi khi không được gọi. Đây là giai đoạn thử nghiệm

________số 8

Để phân biệt rõ hơn nữa đây là cách bạn sẽ gọi hàm trong mã của mình

filterByTerm(inputArr, "link");

Trong Jest, chức năng bao bọc bên trong mong đợi kết hợp với đối sánh  (chức năng Jest để kiểm tra đầu ra) thực hiện kiểm tra thực tế. Đây là giai đoạn kiểm tra hoàn chỉnh

npm i jest --save-dev

0

(Để tìm hiểu thêm về matchers Jest, hãy xem tài liệu )

You enter the command

npm i jest --save-dev

1

Bạn sẽ thấy đoạn test fail

npm i jest --save-dev

2

“Lỗi tham chiếu. filterByTerm không được xác định”. Hiển thị lỗi rất chính xác. Please fix in next section

Sửa lỗi kiểm tra đoạn

Điều kiện thiếu là việc triển khai filterByTerm. Để thuận tiện, chúng tôi sẽ tạo chức năng trong cùng một tệp nơi kiểm tra tồn tại. Trong một dự án thực tế, bạn sẽ xác định hàm trong một tệp khác

Để thực hiện bài kiểm tra, chúng tôi sẽ sử dụng một hàm JavaScript là bộ lọc  có thể lọc các phần tử từ một mảng. Đây là cách gọi filterByTerm

npm i jest --save-dev

3

Đây là cách nó hoạt động. đối với mỗi phần tử của mảng đầu vào, chúng tôi kiểm tra thuộc tính “url”, khớp nó với biểu thức chính quy với khớp. Đây là mã hoàn chỉnh

npm i jest --save-dev

4

Bây giờ test times nữa

npm i jest --save-dev

1

and used to public

npm i jest --save-dev

6

Bạn đã làm rất tốt. Nhưng chúng ta đã test xong chưa? . Chúng ta còn phải test trường hợp fail. Hãy nhấn mạnh chức năng với cụm từ tìm kiếm chữ hoa

npm i jest --save-dev

7

Kiểm tra … và thất bại. We are back to continue fix

Sửa lỗi CHỮ HOA

filterByTerm cũng nên tính đến các cụm từ tìm kiếm chữ hoa. Nói cách khác, nó sẽ trả về các đối tượng phù hợp ngay cả khi cụm từ tìm kiếm là một chuỗi chữ hoa

npm i jest --save-dev

8

Để kiểm tra điện hoa, chúng tôi giới thiệu kiểu kiểm tra mới

npm i jest --save-dev

9

Để thành công, chúng ta có thể điều chỉnh biểu thức được cung cấp để phù hợp

  "scripts": {
    "test": "jest"
  },

0

Thay vì searchTerm ngay lập tức, chúng ta có thể xây dựng một biểu thức chính quy (biểu thức chính quy) không phân biệt chữ hoa chữ thường , nghĩa là một biểu thức đối sánh với bất kể trường hợp nào của chuỗi. Đây là cách khắc phục

  "scripts": {
    "test": "jest"
  },

1

Và đây là đoạn mã hoàn chỉnh

  "scripts": {
    "test": "jest"
  },

2

Kiểm tra lại và thành công

Bây giờ chúng ta thử viết một bài kiểm tra khác với nội dung như sau

1. Kiểm tra cụm từ tìm kiếm “uRl”
2. Kiểm tra một cụm từ tìm kiếm rỗng

Trong phần tiếp theo, chúng ta sẽ thấy một điều quan trọng khác trong quá trình thử nghiệm. bao phủ mã (mã bao phủ chế độ )

Bảo hiểm mã là gì?

Phạm vi mã là gì? . Tạo một thư mục mới bên trong dự án với tên là src và tạo một tệp có tên là filterByTerm. js where we will set and xuất( export  ) hàm của chúng ta

  "scripts": {
    "test": "jest"
  },

3

This is file filterByTerm. js

  "scripts": {
    "test": "jest"
  },

4

Bây giờ hãy giả sử tôi là một đồng nghiệp mới của bạn. Tôi không biết gì về thử nghiệm và thay vì hỏi thêm , tôi đi thẳng vào hàm đó để thêm một câu lệnh nếu mới

  "scripts": {
    "test": "jest"
  },

5

Có một dòng mã mới bên trong filterByTerm  và dường như nó sẽ không được kiểm tra.  

Và cái đó được gọi là  mã vùng phủ sóng  và nó là một công cụ mạnh mẽ. Jest có phạm vi mã tích hợp và bạn có thể sử dụng nó theo hai cách

1. Bằng dòng lệnh với cờ “–coverage”
2. Bằng cách cấu hình Jest trong gói. json

Trước khi kiểm tra độ bao phủ của mã, hãy đảm bảo đã nhập filterByTerm trong kiểm tra /filterByTerm. thông số kỹ thuật. js

  "scripts": {
    "test": "jest"
  },

6

Lưu và kiểm tra lại với vùng phủ sóng

  "scripts": {
    "test": "jest"
  },

7

Đây là những gì bạn thấy

  "scripts": {
    "test": "jest"
  },

8

Một bản tóm tắt của phạm vi bảo hiểm cho chức năng của chúng tôi. Như bạn có thể thấy dòng 3 không được bảo vệ. Cố gắng sửa chữa để đạt được 100% bằng cách kiểm tra tuyên bố mà tôi vừa thêm

Nếu bạn muốn giữ phạm vi bảo hiểm mã luôn hoạt động, hãy cấu hình Jest trong gói. json như vậy

  "scripts": {
    "test": "jest"
  },

9

You can also mount flag for file test

cd getting-started-with-jest
mkdir __tests__

0

Nếu bạn muốn định dạng HTML

cd getting-started-with-jest
mkdir __tests__

1

Bây giờ, mỗi khi bạn kiểm tra npm, bạn có thể truy cập vào một thư mục mới có tên là phạm vi trong thư mục dự án của bạn. bắt đầu với trò đùa / bảo hiểm /. Trong thư mục đó, bạn sẽ tìm thấy một loạt các tệp trong đó /coverage/index. html là một bản tóm tắt HTML hoàn chỉnh về phạm vi bảo hiểm

Nếu bạn nhấp vào tên hàm, bạn cũng sẽ thấy đoạn mã bị lỗi

với phạm vi bảo hiểm. Bạn sẽ có một bảng báo cáo chi tiết

Kết luận

Thử nghiệm là một chủ đề lớn và hấp dẫn. Có nhiều loại thử nghiệm và nhiều thư viện để thử nghiệm. Trong hướng dẫn Jest này, bạn đã học cách định cấu hình Jest để tạo mức độ phù hợp của báo cáo , cách tổ chức và viết Bài kiểm tra đơn vị đơn giản