Nếu bạn muốn biết làm thế nào để kiểm tra phản ứng, bạn đang ở đúng nơi. Bạn có thực sự biết mã của bạn làm những gì nó được cho là phải làm? Bạn đã thử nó trong trình duyệt chưa? Điều gì sẽ xảy ra nếu bạn không có, hoặc bạn không thể kiểm tra mọi thứ, và nó phá vỡ trong sản xuất?
Thư viện thử nghiệm là một nhóm các nhà phát triển tiện ích sử dụng để viết các bài kiểm tra riêng lẻ trên các thành phần ứng dụng. Một số phần của các phần của một bài kiểm tra là:
Sự miêu tả:
mô tả những gì bài kiểm tra là về
Sử dụng / render:
sử dụng thành phần trong môi trường nơi nó có thể được kiểm tra
Chế giễu:
tạo các chức năng giả vờ, để bạn có thể kiểm tra các giả định của mình
Trong suốt bài viết này, tôi sẽ khám phá một số ví dụ từ thư viện thử nghiệm phản ứng để giúp bạn bắt đầu với cách cải thiện sự mạnh mẽ của đầu ra mã của bạn, cũng như đảm bảo mã của bạn không ném Up bất ngờ khó chịu sau khi nó đi vào sản xuất.
Muốn có nhiều tài nguyên hữu ích hơn? Đây là một cách tốt nhất của những người giỏi nhất
Công cụ thiết kế web
xung quanh điều đó sẽ giúp bạn làm việc thông minh hơn. Hoặc nếu bạn cần một máy mới, hãy thử vòng tròn này của
Máy tính xách tay tốt nhất để lập trình
. Hoặc nếu bạn đang xây dựng một trang web mới, bạn có thể cần rất nhiều
người tạo ra trang web
.
01. Bắt đầu với Thư viện Kiểm tra phản ứng
Tôi sẽ sử dụng TỰ ĐỘNG-RECT-APP cho bản demo này vì nó đã được cấu hình sẵn với thư viện thử nghiệm. Nếu bạn đang sử dụng Gatsby hoặc Cài đặt tùy chỉnh, có thể có một số cấu hình bạn cần chạy qua trước khi bắt đầu sử dụng thư viện thử nghiệm.
Để bắt đầu, hãy tạo một ứng dụng mới. Nếu bạn có một phiên bản Node.js gần đây, bạn có thể chạy lệnh sau mà không cần cài đặt bất cứ thứ gì khác trên toàn cầu:
npx create-react-app netmag-javascript-testing
02. Quyết định những gì để kiểm tra
Hãy tưởng tượng chúng ta có một thành phần đơn giản, nói một nút với một số trạng thái. Một số thứ cần thử nghiệm trong một thành phần như thế này là gì?
●
Sự xuất hiện của thành phần:
Chúng tôi không muốn bất cứ điều gì thay đổi bất ngờ sau khi chúng tôi đã viết thành phần của chúng tôi. Vì vậy, chúng tôi sẽ viết một bài kiểm tra chụp nhanh để ghi lại cách nó kết xuất. Sau đó, nếu có bất cứ điều gì thay đổi, chúng ta sẽ thấy nó nhanh chóng mà không cần kiểm tra hướng dẫn hoặc trực quan. Điều này là tuyệt vời cho các thành phần bao gồm nhiều thành phần nhỏ hơn: bạn có thể thấy nhanh khi (và ở đâu) xuất hiện của nó đã bị ảnh hưởng.
●
Các nhánh khác nhau mà kết xuất:
Bởi vì chúng tôi có thể có hai hoặc nhiều đầu ra khác nhau, chúng tôi cần kiểm tra nó sẽ hiển thị tất cả chúng một cách chính xác, không chỉ là một trong số chúng. Vì vậy, chúng ta cần mô phỏng một sự kiện nhấp chuột và có một bài kiểm tra ảnh chụp nhanh khác cho cách thực hiện nó sau nhánh mã này đã được chạy.
●
Các chức năng đó được gọi như mong đợi:
Chúng tôi muốn đảm bảo rằng mã chúng tôi đã viết để gọi một chức năng khác hoạt động như chúng tôi cho rằng nó sẽ. Nhưng vì chức năng đó là một sự phụ thuộc bên ngoài, chúng tôi không muốn kiểm tra điều đó ở đây. Các thử nghiệm của chúng tôi chỉ cần gói gọn chức năng chúng tôi muốn chúng.
Hãy viết bài kiểm tra đầu tiên của chúng tôi. Tạo một tập tin mới được gọi là
Mycomponent.unit.test.js.
trong cùng một thư mục với thành phần. Bằng cách thêm test.js ở cuối, nó sẽ được thư viện thử nghiệm tự động. Nội dung của tệp đó là dưới đây:
Nhập khẩu phản ứng từ 'phản ứng'
nhập {render} từ '@ kiểm tra thư viện / phản ứng'
nhập mycomponent từ './mycomponent'
mô tả ('the & lt; mycomponent / & gt;', () = & gt; {
// kiểm tra đi đây
})
Điều đầu tiên tôi muốn thu hút sự chú ý của bạn là
diễn tả()
Chức năng, có hai đối số: Đầu tiên là một chuỗi mà bạn có thể sử dụng để mô tả tốt hơn - dưới dạng một chuỗi văn bản - những gì bài kiểm tra của bạn sẽ được thực hiện. Trong trường hợp của chúng tôi, chúng tôi chỉ đơn giản nói rằng nó sẽ kết xuất. Điều này rất hữu ích khi người khác nhìn vào mã của bạn hoặc bạn phải nhớ những gì bạn đã làm ở giai đoạn sau. Viết các câu lệnh mô tả tốt là một hình thức tài liệu mã và một lý do chính đáng khác để viết bài kiểm tra.
Đối số thứ hai là bài kiểm tra của bạn. Các
diễn tả()
Chức năng sẽ chạy tất cả các thử nghiệm này sau khi khác.
04. Sử dụng chức năng dọn dẹp
Hãy giới thiệu một chức năng trợ giúp được gọi là
trước đây ()
. Chúng ta cần sử dụng cái này bởi vì mỗi lần chúng ta làm một cái gì đó với thành phần, chúng tôi muốn một bản sao mới mà không có đạo cụ mà trước đây chúng tôi đã chuyển cho nó vẫn tồn tại trong thành phần. Hoặc chúng ta có thể cần phải kết xuất lại thành phần:
trước đây ()
Làm điều đó cho chúng ta và chúng ta có thể truyền nó cho chức năng dọn dẹp.
nhập {render, dọn dẹp} từ '@ kiểm tra thư viện / phản ứng'
...
mô tả ('Thành phần sẽ kết xuất', () = & gt; {
trước khi dọn dẹp (dọn dẹp)
}
Trong bước này, chúng ta sẽ 'gắn kết' thành phần của chúng tôi (hoặc hiển thị nó).
Mô tả ('Thành phần sẽ hiển thị', () = & gt; {
trước khi dọn dẹp (dọn dẹp)
Nó ('kết xuất với các đạo cụ cơ bản', () = & gt; {
render (& lt; mycomponent / & gt;)
})
}
Kết xuất này cung cấp cho chúng tôi quyền truy cập vào tất cả các thuộc tính được kết xuất của thành phần được biên dịch. Nó có thể là tốt để giảm điều này thành một
Console.log ()
Vì vậy, bạn có thể thấy rõ hơn những gì nó làm.
Nếu bạn làm như vậy, bạn sẽ thấy rằng có một vài tính chất hữu ích mà chúng ta có thể tận dụng lợi thế ở đây. Tôi sẽ đưa ra một khẳng định (thực hiện một tuyên bố có thể kiểm tra) và kiểm tra nó bằng cách trích xuất container. Container 'chứa' các nút DOM (tất cả HTML) được liên kết với thành phần.
nó ('kết xuất với các đạo cụ cơ bản', () = & gt; {
const {container} = render (& lt; mycomponent / & gt;)
})
Bây giờ chúng tôi có quyền truy cập vào container, làm cách nào để nói rằng nó được hiển thị theo khẳng định của tôi? Bằng cách thêm một bài kiểm tra ảnh chụp nhanh.
Hãy nghĩ về một ảnh chụp nhanh như giống như một bức ảnh. Nó cần một ảnh chụp nhanh thành phần của chúng tôi tại một thời điểm cụ thể. Sau đó, bất cứ khi nào chúng ta thực hiện các thay đổi cho mã, chúng ta có thể thấy nó vẫn khớp với ảnh chụp nhanh gốc. Nếu có, chúng ta có thể tự tin rằng không có gì thay đổi trong thành phần. Tuy nhiên, nếu không, chúng ta có thể đã phát hiện ra một vấn đề bắt nguồn từ một thành phần khác, một vấn đề mà chúng ta có thể không phát hiện được trước đó:
06. Thuộc tính kiểm tra
Đạo cụ, hoặc thuộc tính, của một thành phần cũng có thể được kiểm tra với các ảnh chụp nhanh. Kiểm tra các đạo cụ khác nhau mà bạn cung cấp cho thành phần của bạn sẽ cung cấp cho bạn vùng phủ sóng và sự tự tin hơn. Bạn không bao giờ biết khi nào một yêu cầu sẽ có nghĩa là đạo cụ của thành phần của bạn được tái cấu trúc và đầu ra cuối cùng sẽ thay đổi.
Chúng tôi xác định các thuộc tính trong một đối tượng và sau đó sử dụng toán tử lan truyền (ba dấu chấm theo sau là tên đối tượng:
... Lightproperies)
Bởi vì chúng ta chỉ có thể vượt qua một đối số trong khi chúng ta kết xuất theo cách này. Nó cũng hữu ích để xem những thuộc tính nào bạn đang đi trong cách ly:
nó ('kết xuất với các đạo cụ cơ bản', () = & gt; {
const {container} = render (& lt; mycomponent / & gt;
)
mong đợi (container) .tomatchsnapshot ()
})
nó ('kết xuất với các đạo cụ phiên bản ánh sáng', () = & gt; {
const {container} = render (
& lt; mycomponent {... LightproperIES} / & gt;
)
mong đợi (container) .tomatchsnapshot ()
})
07. Thay đổi thử nghiệm trong UI
Hãy tưởng tượng thành phần của chúng tôi có một nút và bạn muốn đảm bảo rằng một cái gì đó xảy ra khi nhấp vào nút. Bạn có thể nghĩ rằng bạn muốn kiểm tra trạng thái của ứng dụng; Ví dụ: bạn có thể bị cám dỗ để kiểm tra rằng trạng thái đã cập nhật. Tuy nhiên, đó không phải là đối tượng của các thử nghiệm này.
Điều này giới thiệu chúng tôi với một khái niệm quan trọng trong việc sử dụng thư viện thử nghiệm: Chúng tôi không ở đây để kiểm tra trạng thái hoặc cách thức thành phần của chúng tôi hoạt động. Chúng tôi ở đây để kiểm tra cách mọi người sẽ sử dụng thành phần và nó đáp ứng mong đợi của họ.
Vì vậy, liệu nhà nước đã cập nhật hay không là phi vật chất; Những gì chúng ta muốn kiểm tra là kết quả của nút đó nhấn.
Hãy tưởng tượng chúng ta đang thử nghiệm kết quả của một hàm thay đổi giao diện người dùng từ chế độ tối sang chế độ ánh sáng. Đây là thành phần:
Const Modetoggle = () = & gt; Đồn là
const [chế độ, setmode] = usestate ['light']
Const toggletheme = () = & gt; Đồn là
if (chủ đề === 'ánh sáng') {
Settheme ('Dark')
} other {
SetTheme ('Light')
Không thể
Không thể
trở về (
& lt; togglebutton Data-Termid = "Chế độ chuyển đổi" Lightmode = {mode} onclick = {togglemode} & gt;
Chế độ chuyển đổi
& lt; / togglebutton & gt;
)
Không thể
Đầu tiên, chúng ta nên thêm ID thử nghiệm vào nút để chúng ta có thể tìm thấy nó trong giai đoạn kết xuất:
trở về (
& lt; togglebutton
Data-Termid = "Chế độ chuyển đổi"
lightmode = {mode}
onclick = {togglemode}
& gt;
Chế độ chuyển đổi
& lt; / togglebutton & gt;
Bạn có nhận thấy rằng chúng tôi đã thêm thuộc tính mới
Data-Termid.
Để nút? Đây là cách bạn có thể kiểm tra điều đó. Đầu tiên, nhập một chức năng mới, FireEvent từ thư viện thử nghiệm:
Nhập {Cleanup,
Chiếu lửa,
rending.
} Từ '@ kiểm tra thư viện / phản ứng'
Chúng ta có thể sử dụng chức năng đó để kiểm tra có những thay đổi trong UI và những thay đổi đó phù hợp:
nó ('kết xuất với các đạo cụ cơ bản', () = & gt; {
const {container} = render (& lt; togglebutton / & gt;
)
mong đợi (container) .tomatchsnapshot ()
})
Nó ('Hiển thị UI ánh sáng khi nhấp vào', () = & gt; {
const {container, getbytestid} = render (& lt; togglebutton / & gt;)
FireEvent.Click (getbytestid ('chế độ chuyển đổi')))
mong đợi (container) .tomatchsnapshot ()
})
Điều này thật tuyệt: chúng ta không phải tự đi đến trang web và nhìn xung quanh, sau đó nhấp vào nút và nhìn vào khoảng thời gian thứ hai - trong đó, bạn có thể thừa nhận, bạn sẽ quên hoặc bỏ lỡ một cái gì đó! Bây giờ chúng ta có thể tự tin rằng, với đầu vào tương tự, chúng ta có thể mong đợi cùng một đầu ra trong thành phần của chúng tôi.
Khi nói đến id kiểm tra, cá nhân tôi không thích sử dụng
Data-Termid.
để tìm một cái gì đó trong DOM. Rốt cuộc, đối tượng của các bài kiểm tra là bắt chước những gì người dùng đang làm và kiểm tra những gì xảy ra khi họ làm.
Data-Termid.
Cảm thấy giống như một chút gian lận - mặc dù các thử nghiệm dữ liệu có thể sẽ có ích cho kỹ sư QA của bạn (xem BoxOut vai trò của các kỹ sư đảm bảo chất lượng).
Thay vào đó, chúng ta có thể sử dụng
getbytext ()
và vượt qua trong văn bản của nút của chúng tôi. Phương pháp đó sẽ là rất nhiều hành vi cụ thể.
08. Mock và gián điệp chức năng
Đôi khi chúng ta có thể cần kiểm tra một cuộc gọi đến một chức năng nhưng chức năng đó nằm ngoài phạm vi của bài kiểm tra. Ví dụ: tôi có một mô-đun riêng có chứa hàm tính giá trị của PI cho một số thập phân nhất định.
Tôi không cần phải kiểm tra kết quả của mô-đun đó là gì. Tôi cần kiểm tra rằng chức năng của tôi làm như mong đợi. Để biết thêm thông tin về lý do tại sao đây là, xin vui lòng xem đơn vị hộp và các bài kiểm tra tích hợp. Trong trường hợp này, chúng ta có thể 'Mock' Chức năng đó:
Const getpivalue = jest.fn ()
nó ('gọi chức năng khi nhấp vào', () = & gt; {
const {container, getbytestid} = render (& lt; togglebutton / & gt;)
FireEvent.Click (getbytestid ('chế độ chuyển đổi')))
mong đợi (getpivalue) .tohaveencalledtimes (1)
)
})
Chức năng
tohaveencalledtimes ()
là một trong nhiều chức năng trợ giúp trong thư viện thử nghiệm cho phép chúng tôi
để kiểm tra đầu ra của các chức năng. Điều này cho phép chúng tôi không chỉ chỉ phạm vi kiểm tra các thử nghiệm của chúng tôi với mô-đun mà chúng tôi muốn kiểm tra mà còn có nghĩa là chúng tôi có thể 'gián điệp' trên hoặc xem chức năng của chúng tôi làm gì khi thực hiện chức năng đó.
Bài kiểm tra viết có vẻ hơi nản chí để bắt đầu. Tôi hy vọng hướng dẫn này đã cho bạn một chút tự tin hơn để thử nó. Kể từ khi tôi bắt đầu viết bài kiểm tra cho các ứng dụng của mình, tôi thực sự không thể quay lại: Tôi có thể nghỉ ngơi dễ dàng hơn, biết rằng tôi sẽ rời khỏi một di sản tốt hơn nhiều cho những người sẽ sử dụng công việc của tôi trong tương lai.
Hãy nhớ rằng, nếu bạn đang xây dựng một trang web phức tạp, bạn sẽ muốn có được
web hosting
dịch vụ tại chỗ trên. Và nếu trang web đó có khả năng chứa nhiều tài sản, lưu trữ chúng đáng tin cậy
lưu trữ đám mây
quan trọng.
Nội dung này ban đầu xuất hiện trong
Tạp chí Net.
. Đọc thêm
Bài viết thiết kế web ở đây
.
Đọc thêm:
HTML6: Nó là gì và khi nào nó đến?
Viết mã HTML nhanh hơn
Thiết kế ứng dụng di động: Hướng dẫn dành cho người mới bắt đầu
