一、安装

  1. // 1 创建vue项目
  2. vue create jest // 选默认vue3
  4. // 2，进入项目
  5. cd jest
  6. code ./
  8. // 3，安装jest
  9. vue add unit-jest
  10. // 项目中多了jest.config.js文件和tests文件夹

二、配置

  1. // jest.config.js  
  2. module.exports = {
  3.   preset: '@vue/cli-plugin-unit-jest',
  4.   transform: {
  5.     '^.+\\.vue$': 'vue-jest',
  6.     '^.+\\.ts$': 'ts-jest', // 新增：ts能被读取
  7.       // '^.+\\.js$': "<rootDir>/node_modules/babel-jest" // js文件可以用es6
  8.   }
  9. }

三、运行

  1. npm run test:unit

四、测试公用函数

1，新增函数

  1. // src/utils/index.ts
  3. export const add = (num:number)=>{
  4.     return ++num
  5. }

2，测试函数

  1. // tests/unit/example.spec.js
  3. import { add } from '@/utils/index.ts'
  4. describe('utils测试', () => {
  5.   test('adds 1 + 2 to equal 3', () => {
  6.     expect(add(2)).toBe(3);
  7.   });
  8. })

五、测试vue组件

1，新增组件

  1. // src/components/HelloWorld.vue
  3. <template>
  4.  <h1>{{ msg }}</h1>
  5. </template>
  7. <script>
  8. export default {
  9.   props: {
  10.     msg: String
  11.   }
  12. }
  13. </script>

2，测试组件

  1. // tests/unit/example.spec.js
  3. import { shallowMount } from '@vue/test-utils'
  4. import HelloWorld from '@/components/HelloWorld.vue'
  6. describe('HelloWorld.vue组件测试', () => {
  7.   it('renders props.msg when passed', () => {
  8.     const msg = 'new message'
  9.     const wrapper = shallowMount(HelloWorld, {
  10.       props: { msg }
  11.     })
  12.     expect(wrapper.text()).toMatch(msg)
  13.   })
  14. })

六、运测试结果

  1. > jest@0.1.0 test:unit
  2. > vue-cli-service test:unit
  4.  PASS  tests/unit/example.spec.js
  5.   HelloWorld.vue组件
  6.     ✓ renders props.msg when passed (13ms)
  7.   utils测试
  8.     ✓ adds 1 + 2 to equal 3
  10. Test Suites: 1 passed, 1 total
  11. Tests:       2 passed, 2 total
  12. Snapshots:   0 total
  13. Time:        2.345s
  14. Ran all test suites.

参考：https://www.jestjs.cn/docs/getting-started