Contents
Thiết lập dự án
Hãy bắt đầu bằng cách thiết lập một ứng dụng React cơ bản. Chúng tôi sẽ cài đặt Puppeteer và Faker.
Sử dụng create-react-app
để xây dựng ứng dụng React và đặt tên cho nó là testing-app
.
create-react-app testing-app
Cài đặt puppeteer
yarn add faker puppeteer --dev
Chúng ta không cần phải cài đặt Jest vì đã được cài sẵn trong gói React. Nênnkhông cần cài Jest
Script NPM
Tiếp theo, chúng ta cần cập nhật script bên trong package.json
để gọi Jest. Chúng tôi cũng sẽ thêm một tập lệnh khác được gọi debug
.Script này sẽ thiết lập biến môi trường nút của chúng tôi để chế độ gỡ lỗi và gọi npm test
.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"debug": "NODE_ENV=debug npm test",
"eject": "react-scripts eject",
}
Sử dụng Puppeteer, chúng ta có thể chạy thử nghiệm trên trình duyệt Chromium. Đây là một tính năng tuyệt vời , vì nó cho phép chúng ta xem những log, DevTools và nhiều thứ khác tuyệt vời. Hạn chế duy nhất là nó có thể làm cho mọi thứ thực sự bị chậm lại(CI).
Chúng ta có thể sử dụng các biến môi trường để quyết định xem có chạy thử theo kiểu nào . Tôi sẽ thiết lập các bài kiểm tra của mình theo cách mà khi tôi muốn, tôi có thể chạy debug
kịch bản.
File App.test.js
Bây giờ hãy mở App.test.js
tệp trong src
thư mục của bạn, và thêm thư việc puppeteer
const puppeteer = require('puppeteer')
const puppeteer = require('puppeteer')
const isDebugging = () => {
const debugging_mode = {
headless: false,
slowMo: 250,
devtools: true,
}
return process.env.NODE_ENV === 'debug' ? debugging_mode : {}
}
describe('on page load', () => {
test('h1 loads correctly', async() => {
let browser = await puppeteer.launch({})
let page = await browser.newPage()
page.emulate({
viewport: {
width: 500,
height: 2400,
}
userAgent: ''
})
})
})
Đầu tiên chúng ta khai báorequire
puppeteer. Sau đó, chúng ta describe
đoạn test, nơi chúng tôi kiểm tra tải trang ban đầu. Ở đây chúng ta đang kiểm tra xem h1
có chứa văn bản chính xác hay không.
Bên trong mô tả test , chúng ta cần phải xác định browser
và page
các biến. Đây là những yêu cầu để đi test thành công.
Các launch
phương pháp giúp chúng ta vượt qua qua các tùy chọn cấu hình cho trình duyệt của mình, và cho phép chúng ta kiểm soát và thử nghiệm các ứng dụng của chúng ta trong cài đặt trình duyệt khác nhau. Chúng ta thậm chí có thể thay đổi cài đặt của trang trình duyệt bằng cách đặt các tùy chọn mô phỏng.
Những thuộc tính cần thiết
Tôi đã tạo một hàm có tên isDebugging
ở đầu tệp. Chúng ta sẽ gọi hàm này bên trong phương thức khởi chạy. Hàm này sẽ có một đối tượng được gọi là debugging_mode
có chứa ba thuộc tính:
headless: false
- Cho dù chúng tôi muốn chạy thử nghiệm của chúng tôi không đầu (true
) hoặc trong trình duyệt Chromium (false
)slowMo: 250
- Làm chậm hoạt động của Puppeteer xuống 250 mili giây.devtools: true
- Liệu trình duyệt có nên mở DevTools (true
) trong khi tương tác với ứng dụng hay không.
Các isDebugging
chức năng sau ternary đó là dựa trên các biến môi trường. Câu lệnh ternary quyết định xem ứng dụng có trả về object debuggin_mode
hoặc rỗng
Quay trở lại package.js
on , chúng tôi đã tạo ra một script debug
mà sẽ thiết lập biến môi trường . Thay vì test i, isDebugging
sẽ trả về các tùy chọn trình duyệt tùy chỉnh của chúng ta, tùy thuộc vào biến môi trường của chúng ta debug
.
Tiếp theo, chúng ta đang thiết lập một số tùy chọn Điều này được thực hiện bên trong page.emulate
. Chúng ta đang thiết lập các viewport
thuộc tính của width
và height
, và thiết lập userAgent
như là một chuỗi rỗng.
page.emulate
là cực kỳ hữu ích vì nó cho chúng ta khả năng test của chúng tôi theo các tùy chọn trình duyệt khác nhau. Chúng tôi cũng có thể nhân rộng các thuộc tính trang khác nhau page.emulate
.
Test nội dung HTML với Puppeteer
Chúng ta đã sẵn sàng để bắt đầu viết các bài kiểm tra cho Ứng dụng React. Trong phần này tôi sẽ kiểm tra thẻ <h1>
và điều hướng , đảm bảo rằng chúng hoạt động chính xác.
Mở App.test.js
tệp và bên trong test
và ngay bên dưới page.emulate
viết code sau:
await page.goto('http://localhost:3000/');
const html = await page.$eval('.App-title', e => e.innerHTML);
expect(html).toBe('Welcome to React');
browser.close();
}, // This is not new
16000
); // this is not new
}); // this is not new
Về cơ bản, chúng ta trỏ đi đến url http://localhost:3000/
. Puppeteer sẽ bỏ qua lớp App-title
. Lớp này có trên thẻ h1
của chúng ta .
Các $.eval
phương pháp được thực sự chạy một document.querySelector
trong bất cứ khi nào được thông qua.
Puppeteer tìm thấy bộ chọn phù hợp với lớp này, nó sẽ chuyển hàm gọi lại e.innerHTML
. Ở đây, Puppeteer sẽ có thể trích xuất <h1>
phần tử và kiểm tra xem nó có hay không Welcome to React
.
Khi Puppeteer được thực hiện với bài kiểm tra, browser.close
trình duyệt sẽ đóng trình duyệt.
Debug
Mở một thiết bị đầu cuối lệnh và chạy debug
yarn debug
Nếu ứng dụng của bạn vượt qua bài kiểm tra, bạn sẽ như thế này

Tiếp theo, hãy vào file App.js
và tạo một nav
như sau:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
<nav className='navbar' role='navigation'>
<ul>
<li className="nal-li"><a href="#">Batman</a></li>
<li className="nal-li"><a href="#">Supermman</a></li>
<li className="nal-li"><a href="#">Aquaman</a></li>
<li className="nal-li"><a href="#">Wonder Woman</a></li>
</ul>
</nav>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Lưu ý rằng tất cả các phần tử <li>
đều có cùng một lớp.
Trước khi chúng ta làm điều đó, chúng ta hãy cấu trúc lại code mà chúng ta đã viết trước đây. Bên dưới hàm isDebuggin
, xác định hai biến global browser
và page
. Bây giờ viết một hàm mới được gọi beforeAll
như sau:
let browser
let page
beforeAll(async () => {
browser = await puppeteer.launch(isDebugging())
page = await browser.newPage()
await page.goto(‘http://localhost:3000/')
page.setViewport({ width: 500, height: 2400 })
})
Trước đó, tôi không có gì userAgent
. Vì vậy, tôi chỉ sử dụng setViewport
thay vì beforeAll
. Bây giờ, tôi có thể thoát khỏi localhost
và browser.close
, và sử dụng một afterAll
. Nếu ứng dụng đang ở chế độ debug thì tôi đóng trình duyệt đó.
afterAll(() => {
if (isDebugging()) {
browser.close()
}
})
Bây giờ chúng ta có thể tiếp tục và viết code tesst nav. Bên trong describ
le tạo mới test
như hình dưới đây.
test('nav loads correctly', async () => {
const navbar = await page.$eval('.navbar', el => el ? true : false)
const listItems = await page.$$('.nav-li')
expect(navbar).toBe(true)
expect(listItems.length).toBe(4)
}
Bạn có thể đã nhận thấy rằng tôi đã sử dụng $$
trên listItems
. Đây là cách tắt để chạy document.querySelector
tất cả từ bên trong trang. Khi eval
không được sử dụng cùng với các ký hiệu $ sẽ không được gọi lại.
Chạy để xem liệu code của bạn có thể vượt qua cả hai đoạn test không

Nhân rộng hoạt động của người dùng
Hãy xem cách chúng ta có thể tesst việc gửi biểu mẫu bằng cách sao chép đầu vào , nhấp chuột và các sự kiện trên màn hình cảm ứng. Điều này sẽ được thực hiện với thông tin người dùng bằng cách sử dụng Faker.
Bên trong src
thư mục của chúng ta tạo một file Login.js
. Đây chỉ là một hình thức với bốn hộp đầu vào và một nút để gửi nó.
import React from 'react';
import './Login.css';
export default function Login(props) {
return (
<div className="form">
<div className="form">
<form onSubmit={props.submit} className="login-form">
<input data-testid="firstName" type="text" placeholder="first name"/>
<input data-testid="lastName" type="text" placeholder="last name"/>
<input data-testid="email" type="text" placeholder="Email"/>
<input data-testid="password" type="password" placeholder="password"/>
<button data-testid="submit">Login</button>
</form>
</div>
</div>
)
}
Kết luận
Qua bài viết bạn đã hiểu được cách sử dụng PUPPETEER và JEST để test ứng dụng React một cách hiểu quả. Vì test rất quan trọng trong việc xây dựng và duy trì ứng dụng không bị lỗi khi thay đổi chức năng hoặc thêm chức năng. hoặc bất cứ điều gì ảnh hướng đến phần code.
Bạn có thể tham khảo thêm bài Unit test là gì – Jest test Javascript cho người mới bắt đầu

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.
Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.