Tôi có thể kiểm tra mã JavaScript ở đâu?

Tôi gặp sự cố khi kiểm tra mã javascript của mình trong trình soạn thảo văn bản ứng dụng thứ 3 (Komodo 8 và thậm chí trong Notepad++). Tôi nghe nói rằng tôi muốn kiểm tra mã của mình, tôi phải đặt nó như thế này

Tôi đã thử điều đó và chạy nó trong trình duyệt web của mình (Firefox và Chrome) nhưng tôi không thể thấy đầu ra của mã của mình. Những gì tôi có thể thấy chỉ là lệnh prompt() sẽ bật lên, nhưng sau đó, tất cả những gì tôi có thể thấy chỉ là một trình duyệt cơ bản màu trắng. Tôi vừa hoàn thành trò chơi 'Oẳn tù tì' và tôi nghĩ rằng lý do tại sao tôi không thể thấy đầu ra của mã của mình (tức là 'người dùng chọn đá', 'máy tính chọn giấy', 'giấy thắng') . nhật ký()”. Tôi đã cố gắng thay thế nó bằng “tài liệu. write()”, nhưng vẫn không có gì thay đổi

Nếu tôi chạy mã của mình trong trình chỉnh sửa tích hợp tại đây trong codeacademy, mã sẽ hoạt động tốt. Nhưng trong trình soạn thảo văn bản của ứng dụng thứ 3, nó không hoạt động. Làm ơn giúp tôi. . (

cà phê? . Đó là lý do tại sao chúng tôi tổng hợp tổng quan này về thử nghiệm dành cho nhà phát triển JavaScript. Đọc tiếp để tìm hiểu cách chọn công cụ tốt nhất cho bài kiểm tra đơn vị và E2E của bạn trong JavaScript

Tại sao nên kiểm tra mã JavaScript?

Trong thời đại phát triển nhanh và tích hợp liên tục, điều quan trọng đối với các nhà phát triển là chúng tôi phải kiểm tra mã của mình không chỉ một lần mà nhiều lần. Các phương pháp nhanh phổ biến như phát triển dựa trên thử nghiệm (TDD) và phát triển dựa trên hành vi (BDD) dựa trên thử nghiệm như một khối xây dựng cơ bản

Vậy tại sao các bài kiểm tra lại rất quan trọng đối với lập trình hiện đại? . Bằng cách kiểm tra các mô-đun của chúng tôi một cách độc lập và trong nhiều tình huống nhất có thể, chúng tôi giảm thiểu nguy cơ phải sửa đổi toàn bộ chương trình. Các thử nghiệm đảm bảo rằng chúng tôi sớm tìm ra và sửa các lỗi của mình trong chu kỳ phát triển, giúp chúng tôi tiết kiệm cả thời gian và tiền bạc

Một tác dụng phụ thú vị của các bài kiểm tra được viết bằng TDD và BDD là chúng tự ghi lại. Bằng cách xem xét các bài kiểm tra tương ứng, bất kỳ thành viên nào trong nhóm cũng có thể nhanh chóng hiểu một đoạn mã đang (hoặc ít nhất nên) làm gì

Công cụ kiểm tra JavaScript là gì?

Tất nhiên, bạn có thể viết trực tiếp một số bài kiểm tra của mình trong khung JS mà bạn chọn. Nhưng bạn sẽ sớm cảm thấy mệt mỏi khi phải viết đi viết lại cùng một mã soạn sẵn. Có một cách xử lý các bài kiểm tra nhanh hơn và tinh tế hơn nhiều, đó là thông qua việc sử dụng các công cụ chuyên dụng

Có những loại xét nghiệm nào?

Các bài kiểm tra đơn vị kiểm tra hiệu suất của một chức năng hoặc lớp bị cô lập. Vì hầu hết các chương trình bao gồm các tương tác giữa các mô-đun, nên việc cô lập một chức năng không phải là chuyện nhỏ. Như chúng ta sẽ thấy sau, quy trình kiểm tra JS cung cấp một số cách để giải quyết vấn đề này. Các bài kiểm tra đơn vị được chia thành phía máy chủ (ở mặt sau) và phía máy khách (ở mặt trước)

Kiểm tra tích hợp hoạt động như phần bổ sung cho kiểm tra đơn vị. Chúng giúp chúng tôi kiểm tra cách một số thành phần tương tác. Có thể tất cả các thành phần của thử nghiệm tích hợp đã vượt qua thử nghiệm đơn vị của chúng tôi—nhưng khi chúng tôi kết hợp chúng lại với nhau, chúng không tích hợp như chúng tôi mong đợi. Kiểm tra tích hợp xác định các trường hợp như vậy

Cuối cùng, các thử nghiệm từ đầu đến cuối (E2E) cho phép chúng tôi mô phỏng trải nghiệm người dùng đầy đủ bao gồm cả mặt trước và mặt sau của ứng dụng. Thử nghiệm E2E thường mô phỏng tương tác của người dùng với ứng dụng bằng cách tự động hóa các hành động như nhấp chuột và nhập liệu bằng bàn phím trong trình duyệt web. Các thử nghiệm E2E là phức tạp nhất trong chu trình thử nghiệm và được giải quyết bằng các khung thử nghiệm đặc biệt

Có những thành phần thử nghiệm nào?

Khi chúng tôi kiểm tra đơn vị, chúng tôi muốn các bài kiểm tra của mình chạy nhanh nhất có thể. Chúng tôi không muốn đợi cơ sở dữ liệu phản hồi mỗi khi chúng tôi kiểm tra một chức năng nhỏ. Ngoài ra, chúng tôi muốn đảm bảo rằng các bài kiểm tra đơn vị của chúng tôi chỉ bao gồm mã mà chúng tôi đang kiểm tra. May mắn thay, thử nghiệm JavaScript cung cấp các giao thức đã được thiết lập giúp chúng tôi cách ly các chương trình của mình và xử lý các phần phụ thuộc

Thử nghiệm thực tế kiểm tra xem một đoạn mã có thực hiện những gì chúng ta mong đợi hay không được gọi là 'khẳng định'. ' Khi mã của chúng tôi trở thành sự thật (nghĩa là nó hoạt động theo cách chúng tôi muốn), các xác nhận sẽ lặng lẽ trôi qua. Mặt khác, mã bị lỗi sẽ khiến một xác nhận đưa ra lỗi và cảnh báo nhà phát triển về một lỗi trong mã

Để đối phó với các phụ thuộc bên ngoài, chúng tôi sử dụng 'thử nghiệm nhân đôi' (một cách chơi trên 'stunt doubles'). Với thử nghiệm nhân đôi, chúng tôi có thể chuẩn bị phản hồi soạn sẵn từ cơ sở dữ liệu, cho phép chúng tôi kiểm tra xem mã của chúng tôi có thể xử lý một giá trị nhất định như bình thường hay không. Bạn sẽ thường thấy sự khác biệt giữa giả và sơ khai, nhưng thực sự cả hai đều thực hiện cùng một mục đích là cách ly mã của bạn với thế giới bên ngoài

Đôi khi chúng tôi muốn có một số thông tin tổng hợp về bản thân bài kiểm tra. Ví dụ. bao nhiêu lần một chức năng thực sự chạy trong một bài kiểm tra nhất định? . ' Một gián điệp bao hàm chức năng và trả lại thông tin về nó, cho chúng tôi biết thêm về hoạt động bên trong mã của chúng tôi

Vì vậy, khi bạn có tất cả các xác nhận, mô phỏng và gián điệp của mình, điều đó có nghĩa là quy trình thử nghiệm của bạn đã hoàn tất? . Rốt cuộc, bạn sẽ muốn đảm bảo rằng bạn đang thực sự kiểm tra tất cả các chức năng của mã của mình. Một số liệu hữu ích là phạm vi kiểm tra. các thư viện đặc biệt kiểm tra xem bài kiểm tra của bạn thực sự bao gồm bao nhiêu mã của bạn. Ví dụ: nếu bài kiểm tra của bạn chỉ kiểm tra điều kiện if của câu lệnh if-else, làm sao bạn biết rằng chương trình của mình sẽ không bị lỗi khi gặp một điều kiện mới?

Công cụ kiểm tra JavaScript

Dưới đây chúng tôi sẽ liệt kê các công cụ kiểm tra JavaScript phổ biến nhất, được nhóm theo danh mục kiểm tra

Đơn vị phía máy chủ và thử nghiệm tích hợp

Mocha

Mocha là một khung thử nghiệm cho Node. ứng dụng js. Kiểm tra không đồng bộ (khi một thành phần phải đợi một thành phần khác ra lệnh) là một tính năng quan trọng trong kiểm tra JS và thật dễ dàng để thực hiện chúng bằng Mocha. Khung có thể kết hợp các loại thư viện xác nhận khác nhau, nhưng tính linh hoạt của nó có nghĩa là sẽ mất nhiều thời gian hơn để thiết lập Mocha so với các khung khác

nói đùa

Jest là một khung thử nghiệm rất phổ biến khác. Nó được duy trì bởi Facebook và có thể được sử dụng để kiểm tra các khung JavaScript khác nhau, bao gồm React, Angular và Vue. Nó đi kèm với các thư viện mô phỏng và xác nhận, dẫn đến cấu hình nhanh hơn nhiều so với Mocha. Các nhà phát triển thường ca ngợi các bài kiểm tra Jest vì chạy rất nhanh

hoa nhài

Một khung cũ hơn một chút, Jasmine được thiết kế rõ ràng để thử nghiệm trong BDD. Giống như Jest, Jasmine rất dễ cài đặt và đi kèm với các chức năng tích hợp để xác nhận và kiểm tra gấp đôi. Đó là khuôn khổ ưa thích để thử nghiệm trong Angular

Chai

Chai là một thư viện xác nhận được xây dựng để kiểm tra đơn vị mã back-end và front-end. Nó có thể được kết hợp với bất kỳ khung kiểm tra JavaScript nào

sinon

Sinon là một công cụ chế nhạo. Thư viện này xử lý các bản mô phỏng, sơ khai và gián điệp của bạn. Giống như thư viện khẳng định Chai, nó thường được nhập vào một khung kiểm tra khác

Kiểm tra đơn vị phía máy khách

Khi bạn hài lòng với kết quả của các bài kiểm tra tích hợp và đơn vị phụ trợ của mình, bạn có thể muốn kiểm tra các phần tử mã của mình chỉ hoạt động trong trình duyệt. Người chạy thử sẽ giúp bạn kiểm tra các yếu tố giao diện người dùng của mình trong nhiều môi trường khác nhau. Một lựa chọn chạy thử nghiệm phổ biến là Karma. Nó được viết bởi nhóm Angular JS và có thể được sử dụng ngay lập tức để chạy các bài kiểm tra được viết bằng Mocha, Jasmine và QUnit (một khung kiểm tra đơn vị JavaScript khác)

Thử nghiệm đầu cuối

Trong các thử nghiệm E2E của bạn, bạn kết hợp cả mặt sau và mặt trước để xác minh rằng các ứng dụng của bạn thực sự hoạt động. Bạn có thể muốn mô phỏng toàn bộ trải nghiệm người dùng, chẳng hạn như đăng ký dịch vụ hoặc thay đổi mật khẩu. Theo truyền thống, các bài kiểm tra E2E khá tốn thời gian. Rất may, giờ đây chúng tôi đã có Cypress, một khung thử nghiệm E2E được thiết kế dành riêng cho các nhà phát triển. Cypress nhanh và đơn giản để sử dụng. Chúng tôi thích nó đến nỗi chúng tôi đã viết toàn bộ bài đăng trên blog về Cypress—hãy xem nó nếu bạn muốn tìm hiểu thêm về khung kiểm tra E2E này

Làm cách nào để chọn các công cụ tốt nhất để kiểm tra JavaScript?

Vũ trụ thử nghiệm JavaScript tự hào có hàng chục công cụ miễn phí sử dụng. Điều này có thể hơi quá sức đối với người mới bắt đầu. Một điểm tham khảo tốt là cuộc khảo sát State of JS hàng năm thăm dò ý kiến ​​​​của các nhà phát triển JavaScript về các hoạt động của họ liên quan đến khung, thư viện và công cụ kiểm tra JS

Trong cuộc khảo sát năm ngoái, hơn 23.000 nhà phát triển đã đưa ra ý kiến ​​của họ. Kết quả được phân loại theo 'nhận thức', 'quan tâm', 'cách sử dụng' và 'sự hài lòng'. Mặc dù hai danh mục đầu tiên chỉ đơn giản mô tả liệu mọi người có biết về một khung nhất định và nghĩ về việc sử dụng nó hay không, hai danh mục sau phản ánh số liệu thống kê sử dụng thực tế

Kiểm tra xem những gì đồng nghiệp của bạn đang sử dụng là điều tuyệt vời, nhưng cũng có những yếu tố khác cần xem xét. Thông thường, toàn bộ thiết lập và trường hợp sử dụng của bạn sẽ giới hạn việc lựa chọn khung kiểm tra. Ví dụ: nếu bạn là nhà phát triển muốn thực hiện các bài kiểm tra từ đầu đến cuối, có thể bạn sẽ muốn sử dụng Cypress. Mặt khác, nếu bạn đang muốn kiểm tra Node của mình. js, bạn sẽ tìm kiếm một khung kiểm tra đơn vị phía máy chủ, chẳng hạn như Mocha hoặc Jest

Những lần khác, một lựa chọn khung sẽ quyết định những công cụ khác sẽ sử dụng. Ví dụ: hầu hết những người sử dụng Mocha để xử lý các luồng thử nghiệm của họ đều kết hợp nó với thư viện khẳng định Chai và công cụ mô phỏng Sinon để tích hợp dễ dàng

Bắt đầu thử nghiệm với Mailosaur

Bất kể bạn chọn khung thử nghiệm nào, việc tích hợp plugin Mailosaur Cypress hoặc Node. js vào các bài kiểm tra của bạn một cách nhanh chóng và dễ dàng. Đăng ký tài khoản để sử dụng Mailosaur kiểm tra email trong mã JS của bạn

Làm cách nào để kiểm tra mã JS của tôi?

Làm cách nào để chạy và kiểm tra JavaScript?

Làm cách nào để kiểm tra mã JavaScript trực tuyến?

Tôi có thể kiểm tra mã của mình ở đâu?