- Published on
Setting up for TDD
- Authors
- Name
- Penghua Chen(PH)
透過 Vue Testing HandBook + Vue Test Utils 學習如何在 vue3 中撰寫單元測試。
Setting up for TDD
prerequisite
專案採用 vite 建立,但由於不採用 vitest 作為框架的單元測試工具,這邊要額外以下工具到專案中:
npm install --save-dev jest
npm install --save-dev jest-environment-jsdom
npm install --save-dev @vue/vue3-jest@28 (參考 repo 當下最新版本而定)
npm install --save-dev babel-jest
npm install --save-dev @vue/test-utils@next
npm install --save-dev @babel/preset-env
還要設定以下的 config:
jest.config.js
// 可以透過 jest --init 設定基礎選項
// 以下為主要設定內容
// ...
// The test environment that will be used for testing
testEnvironment: 'jsdom',
// A map from regular expressions to paths to transformers
transform: {
'^.+\\.vue$': '@vue/vue3-jest',
'^.+\\js$': 'babel-jest'
}
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
// An array of file extensions your modules use
moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
// ...
babel.config.js
module.exports = { presets: ['@babel/preset-env'] };
Greeting
元件
撰寫第一個測試 for 測試重點:
- 可以成功渲染
Greeting
元件 - 確定
greeting
的值為"Vue and TDD"
// Greeting.spec.js
import { mount } from '@vue/test-utils';
import Greeting from '@/components/Greeting.vue';
describe('Greeting.vue', () => {
it('renders a greeting', () => {
const wrapper = mount(Greeting);
expect(wrapper.text()).toMatch('Vue and TDD');
});
});
// Greeting.vue
<template>
<div>
{{ greeting }}
</div>
</template>
<script>
export default {
name: 'Greeting',
data() {
return {
greeting: 'Vue and TDD'
};
}
};
</script>