搭建vue 3.0 + vite + vue-test-unit

先说说坑

当jest版本>27时 jest用来处理vue文件的组件是@vue/vue3-jest，不是vue-jest；更不是官网说的vue-jest@next
当babel>7并且用了babel-jest时要安装babel-core@bridge
’

Step

1. 创建一个vite 应用:
   yarn create vite my-app --template vue-ts
2. 使jest能够支持ts
   • 安装必备库： yarn add --dev jest ts-jest @types/jest
   • Jest config file: yarn ts-jest config:init
3. 验证一下
   • 在src下创建一个test目录，创建一个被测试文件 src/test/add.ts和一个测试文件src/test/test.spec.ts

     // test.spec.ts
      import add from './add.ts'
      describe('test', () => {
        it('first',()=>{
          const result = add(1, 1);
          expect(result).toBe(2);
        })
      }) 
     

      // add.ts
      const add = (a:number,b:number) => a+b;
     

4. 通过后证明jest能够测试ts文件
5. 添加vue支持
   • 添加必要库：yarn add --dev @vue/test-utils@next
   • 如果jest版本>27则添加: yarn add --dev @vue/vue3-jest 参考
   • 如果使用了babel-jest：yarn add --dev babel-core@bridge
   • 配置jest.config.js,添加:

     transform: {
         '^.+\\.vue$': '@vue/vue3-jest',
         '^.+\\js$': 'babel-jest',
     },
     

6. 验证一下

   //   src/component/HelloWorld'.vue
        <template>
          <div>
            <h1>{{ msg }}</h1>
         </div>
      </template>
      <script>
       export default {
          name: 'HelloWorld',
          data() {
             return {
                 msg: 'Hello world',
             };
          },
      };
     </script>
   

       // test.spec.ts
        import {mount} from '@vue/test-utils';
        import HelloWorld from '../components/HelloWorld.vue';
   
       describe('test', () => {
        it('first',()=>{
            const wrapper = mount(HelloWorld);
            expect(wrapper.text()).toContain('Hello world')
       })
     });
   

7. 成功就完活了

总结一下

1. 创建应用 yarn create vite my-app --template vue-ts

2. 安装各类必要库：yarn add --dev jest ts-jest @types/jest @vue/test-utils@next @vue/vue3-jest babel-core@bridge

3. 配置文件,先产生一下jest.config.js yarn ts-jest config:init

   • jest.config.js

     /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
     module.exports = {
     preset: 'ts-jest',
     // 此处默认是'node'，如果要进行vue组件测试需要改为‘jsdom'
     testEnvironment: 'jsdom',
     transform: {
          '^.+\\.vue$': '@vue/vue3-jest',
          '^.+\\js$': 'babel-jest',
      },
       moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node']
     }
     
     

这点破玩意，真tm费时间