Test ứng dụng REACT với PUPPETEER VÀ JEST

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 debugkịch bản.

File App.test.js

Bây giờ hãy mở App.test.jstệp trong srcthư 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áorequirepuppeteer. 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 browservà pagecác biến. Đây là những yêu cầu để đi test thành công.

Các launchphươ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_modecó 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 isDebuggingchứ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.json , 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, isDebuggingsẽ 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 viewportthuộc tính của widthvà height, và thiết lập userAgentnhư là một chuỗi rỗng.

page.emulatelà 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 testvà 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 $.evalphương pháp được thực sự chạy một document.querySelectortrong 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.closetrì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.jsvà tạo một navnhư 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 browservà page. Bây giờ viết một hàm mới được gọi beforeAllnhư 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 setViewportthay vì beforeAll. Bây giờ, tôi có thể thoát khỏi localhostvà 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 describle tạo mới testnhư 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.querySelectortất cả từ bên trong trang. Khi evalkhô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 srcthư 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