Testing trong VueJS: Hướng dẫn từ cơ bản đến chuyên sâu với Cypress, Jest và Vue Test Utils

jphopeblog

3 years ago

1. End-to-end testing với Cypress

End-to-end testing là một dạng testing tự động để kiểm tra tính năng toàn vẹn của ứng dụng. Trong VueJS, chúng ta có thể sử dụng Cypress để thực hiện end-to-end testing.

Để bắt đầu làm việc với Cypress, ta cần cài đặt nó bằng cách chạy lệnh sau đây:

npm install cypress --save-dev

Sau khi cài đặt Cypress, ta sẽ có thể tạo một thư mục `cypress/integration` để chứa các file testing. Mỗi file này sẽ chứa một scenario testing.

Cách viết test case với Cypress khá đơn giản. Ví dụ, ta có thể viết như sau để kiểm tra tính năng đăng nhập:

describe('Login', function() {
  it('Logs in programmatically', function() {
    cy.visit('/login')
    cy.get('#email').type('example@gmail.com')
    cy.get('#password').type('password')
    cy.get('.login-button').click()
    cy.url().should('include', '/dashboard')
  })
})

Trong ví dụ này, ta sẽ vào trang `/login`, nhập các thông tin đăng nhập, click vào nút Login, sau đó kiểm tra xem sau khi đăng nhập thành công thì đường dẫn có chứa `/dashboard` hay không.

2. Unit testing với Jest

Unit testing là một dạng testing tự động để kiểm tra các component, Vue directive, filter hoặc bất kỳ phần nào của ứng dụng mà có thể độc lập hoạt động một cách đầy đủ. Trong VueJS, chúng ta có thể sử dụng Jest để thực hiện unit testing.

Để bắt đầu làm việc với Jest, ta cần cài đặt nó bằng cách chạy lệnh sau đây:

npm install jest vue-jest @vue/test-utils --save-dev

Sau khi cài đặt Jest, ta sẽ có thể tạo một thư mục `__tests__` để chứa các file testing. Mỗi file này sẽ chứa các test case tương ứng cho các component, directive, filter của ứng dụng.

Cách viết test case với Jest cũng khá đơn giản. Ví dụ, ta có thể viết như sau để kiểm tra tính năng của một component:

import { mount } from '@vue/test-utils'
import Button from '@/components/Button.vue'

describe('Button', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Button)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })

  test('renders correctly', () => {
    const wrapper = mount(Button, {
      propsData: {
        text: 'Click Me'
      }
    })
    expect(wrapper.text()).toMatch('Click Me')
  })
})

Trong ví dụ này, ta sẽ kiểm tra xem component `Button` có phải là một instance của Vue hay không và có hiển thị đúng thông tin text như mong đợi hay không.

3. Integration testing với Vue Test Utils

Integration testing là một dạng testing tự động để kiểm tra tương tác giữa các component với nhau hoặc bất kỳ phần nào của ứng dụng mà cần thực hiện các kết hợp chức năng. Trong VueJS, chúng ta có thể sử dụng Vue Test Utils để thực hiện integration testing.

Để bắt đầu làm việc với Vue Test Utils, ta cần cài đặt nó bằng cách chạy lệnh sau đây:

npm install @vue/test-utils --save-dev

Sau khi cài đặt Vue Test Utils, ta có thể viết các file testing tương tự như Jest. Tuy nhiên, chúng ta sẽ sử dụng các method của Vue Test Utils để tạo các component, render chúng và thao tác với chúng trong quá trình testing.

Ví dụ, ta có thể viết test case như sau để kiểm tra tính năng của một component dựa trên dữ liệu đầu vào:

import { mount } from '@vue/test-utils'
import RadioButton from '@/components/RadioButton.vue'

describe('RadioButton', () => {
  test('renders options correctly', () => {
    const options = [
      { label: 'Option 1', value: 1 },
      { label: 'Option 2', value: 2 },
      { label: 'Option 3', value: 3 }
    ]
    const wrapper = mount(RadioButton, {
      propsData: {
        name: 'radio-button',
        options: options
      }
    })
    const labels = wrapper.findAll('label')
    expect(labels).toHaveLength(3)
    expect(labels.at(0).text()).toMatch('Option 1')
    expect(labels.at(1).text()).toMatch('Option 2')
    expect(labels.at(2).text()).toMatch('Option 3')
  })

  test('emit selected value', () => {
    const options = [
      { label: 'Option 1', value: 1 },
      { label: 'Option 2', value: 2 },
      { label: 'Option 3', value: 3 }
    ]
    const wrapper = mount(RadioButton, {
      propsData: {
        name: 'radio-button',
        options: options
      }
    })
    const labels = wrapper.findAll('label')
    labels.at(1).trigger('click')
    expect(wrapper.emitted().selected).toBeTruthy()
    expect(wrapper.emitted().selected[0][0]).toEqual({ label: 'Option 2', value: 2 })
  })
})

Trong ví dụ này, ta sẽ kiểm tra xem component `RadioButton` có hiển thị đúng các option và emit đúng value khi người dùng thao tác với nó hay không.

Tổng kết

Trong bài viết này, chúng ta đã tìm hiểu về việc thực hiện testing trong VueJS với Cypress, Jest và Vue Test Utils. Bằng cách kết hợp các dạng testing này, chúng ta có thể đảm bảo tính ổn định và hiệu quả của ứng dụng.

Top 10 kỹ năng vuejs dev nào cũng phải biết: Vuejs dev phải biết 10 kỹ năng nâng cao này nếu muốn thành senior

1. End-to-end testing với Cypress

2. Unit testing với Jest

3. Integration testing với Vue Test Utils

Tổng kết

SHARE BÀI VIẾT NÀY