Cách kiểm tra các thành phần Vue của bạn bằng Khung thử nghiệm Jest
Jest là một khung kiểm tra JavaScript phổ biến đi kèm với rất nhiều tính năng bổ sung cho các nhà phát triển. Nếu bạn hoàn toàn không quen với cách hoạt động của Jest nói chung, tôi khuyên bạn nên bắt đầu với phần giới thiệu này . Khi bạn hiểu những điều cơ bản về Jest, bạn đã sẵn sàng bắt đầu ngay và xem nó được dùng như thế nào để kiểm tra các ứng dụng Vue của bạn.
Cài đặt và Cài đặt Phụ thuộc
Nếu bạn chưa cài đặt Vue CLI trên máy của bạn , hãy bắt đầu bằng lệnh:
$ npm install -g @vue/cli
hoặc, nếu bạn thích Sợi:
$ yarn global add @vue/cli
Đến đây bạn sẽ có thể chạy lệnh vue từ dòng lệnh. Hãy tạo một ứng dụng Vue có tên là alligator-test .
$ vue create alligator-test
Chọn cài đặt trước mặc định tại dấu nhắc (nhấn phím enter). Sau đó, chạy lệnh sau để thêm các phụ thuộc thử nghiệm của ta ( @vue/cli-plugin-unit-jest và @vue/test-utils ):
$ npm install @vue/cli-plugin-unit-jest @vue/test-utils
Tiếp theo, sửa đổi file package.json của dự án của bạn để có một mục nhập trong scripts có nội dung "test": "jest" .
Sau đó, tạo một file jest.config.js với nội dung sau:
module.exports = {
preset: '@vue/cli-plugin-unit-jest'
}
Hãy tiếp tục và mở folder alligator-test trong trình soạn thảo mã bạn chọn.
Mã hóa một ứng dụng đơn giản
Hãy thực hiện một số thay đổi đối với các file mặc định mà vue-cli tạo cho ta .
Xóa folder src/components và sửa đổi App.vue như sau:
<template>
<div id="app">
<div>
<h3>Let us test your arithmetic.</h3>
<p>What is the sum of the two numbers?</p>
<div class="inline">
<p>{{ x1 }} + {{ x2 }} =</p> <input v-model="guess"> <button v-on:click="check">Check Answer</button>
</div>
<button v-on:click="refresh">Refresh</button>
<p>{{message}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
x1: Math.ceil(Math.random() * 100),
x2: Math.ceil(Math.random() * 100),
guess: "",
message: ""
}
},
methods: {
check() {
if (this.x1 + this.x2 === parseInt(this.guess)) {
this.message = "SUCCESS!"
} else {
this.message = "TRY AGAIN"
}
},
refresh() {
this.x1 = Math.ceil(Math.random() * 100);
this.x2 = Math.ceil(Math.random() * 100);
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.inline * {
display: inline-block;
}
img {
height: 350px;
}
</style>
Hãy xem qua mã và xem liệu bạn có thể tìm ra ứng dụng làm gì không.
Sau đó, hãy tiếp tục và chạy $ npm run serve từ folder root của dự án của bạn.
Đến đây bạn truy cập localhost:8080 trong trình duyệt của bạn và xem ứng dụng đang hoạt động.
Hãy thử đưa ra một vài phỏng đoán! Hy vọng rằng bạn có thể vượt qua bài kiểm tra trước khi ta bắt đầu viết bài kiểm tra của bạn . 😉
Kiểm tra ứng dụng với Jest
Tạo một folder có tên __tests__ trong folder root của dự án của bạn, đây là quy ước tiêu chuẩn của jest .
Bên trong __tests__ , tạo một file có tên app.spec.js Theo mặc định, jest sẽ bắt các file kiểm tra nào (tìm kiếm đệ quy thông qua các folder ) trong dự án của bạn có tên *.spec.js hoặc *.test.js .
Ở đầu app.spec.js ta sẽ nhập những thứ sau từ @vue/test-utils cũng như chính thành phần App của ta :
import { mount } from '@vue/test-utils'
import App from './../../src/App.vue'
Hãy viết thử nghiệm đầu tiên của ta .
describe('App', () => {
// Inspect the raw component options
it('has data', () => {
expect(typeof App.data).toBe('function')
})
})
Chạy $ npm test trong Terminal - kiểm tra sẽ vượt qua! Đây là một bài kiểm tra khá cơ bản để kiểm tra xem data cho thành phần của ta có phải là một hàm hay không. Cách ta viết nó trở lại trong giai đoạn viết mã của hướng dẫn này, ta thực sự đã định nghĩa nó như một hàm.
Hãy thêm một khối describe khác vào file thử nghiệm của ta .
describe('Mounted App', () => {
const wrapper = mount(App);
test('is a Vue instance', () => {
expect(wrapper.isVueInstance()).toBeTruthy()
})
}
Lần này ta đang mount thành phần, nó sẽ trả lại cho ta một wrapper .
Một shell bọc là một ví dụ Vue giả.
Ta có thể sử dụng nó để xác nhận xem các giá trị nhất định có hiện diện hay không bằng cách sử dụng hàm expect của Jest. Ta có thể viết các bài kiểm tra như thế này:
it('renders the correct markup', () => {
expect(wrapper.html()).toContain('What is the sum of the two numbers?')
})
Và điều này:
// it's also easy to check for the existence of elements
it('has a button', () => {
expect(wrapper.contains('button')).toBe(true)
})
Các bài kiểm tra này đều vượt qua! Hãy viết một số thử nghiệm cho chức năng dành riêng cho Vue của ứng dụng.
it('renders correctly with different data', async () => {
wrapper.setData({ x1: 5, x2: 10 })
await wrapper.vm.$nextTick()
expect(wrapper.text()).toContain('10')
})
setData cho phép bạn cài đặt dữ liệu của thành phần. Vì các biến đó đã được khởi tạo trong data nên chúng có tính phản ứng. Tuy nhiên, khi ta đang chế nhạo thành phần của bạn , ta phải gọi $nextTick() trên wrapper.vm , là thành phần nằm bên dưới shell bọc. Sau đó, ta có thể thấy rằng các thuộc tính phản ứng của ta đã được cập nhật.
Cuối cùng, ta sẽ kiểm tra xem ứng dụng của ta có cung cấp kết quả chính xác theo những gì ta dự định hay không - kiểm tra bổ sung!
it('button click without correct sum', () => {
expect(wrapper.vm.message).toBe("")
const button = wrapper.find('button')
button.trigger('click')
expect(wrapper.vm.message).toBe('TRY AGAIN')
})
wrapper.find trả về một shell bọc cho phần tử nút (mặc dù có 2 nút trên trang của ta , nút mà ta muốn là nút đầu tiên trên trang để nó được lấy). x1 và x2 được cài đặt từ thử nghiệm trước của ta . Nhưng hãy guess , biến được kết nối với phần tử đầu vào thông qua v-model thì không. Vì vậy, khi nhấp vào nút gửi, tổng chính xác đã không được nhập. Do đó, ta hy vọng message sẽ được TRY AGAIN . Khi bạn chạy $ npm test tra sẽ vượt qua.
it('button click with correct sum', () => {
wrapper.setData({ guess: "15" })
const button = wrapper.find('button')
button.trigger('click')
expect(wrapper.vm.message).toBe('SUCCESS!')
})
Mặt khác, khi ta đặt tổng là chính xác, wrapper.vm.message sẽ nói 'THÀNH CÔNG!'
Kết luận
Tôi hy vọng hướng dẫn này hữu ích cho bạn trong việc tìm hiểu cách bắt đầu thử nghiệm Vue.js với Jest! Chúc may mắn ngoài kia. Kiểm tra ứng dụng của bạn!
Từ thời điểm này, nếu bạn muốn tìm hiểu sâu hơn về những gì Jest có thể làm, tôi khuyên bạn nên đọc thử nghiệm Chụp nhanh .
Các tin liên quan
