快速配置webpack5+vue3+jest

前言#

昨天从0开始配置vue3 + jest让我头疼了两小时，各种问题，其中最烦的是版本兼容问题。。所以这里写一个文章方便自己回来翻阅。

其实不必这么麻烦的，直接用vue-cli即可，直接配置好了。。。

不过学习嘛，就是得从零开始印象才深。

代码上传到GitHub了，可以拉下来看下。

https://github.com/1714080902120/webpack5-vue3-jestgithub.com/1714080902120/webpack5-vue3-jest

安装#

有些包你可能不清楚是干什么用的，没关系，后面配置的时候会说。

先创建安装环境

mkdir webpack5-vue3-jest
cd webpack5-vue3-jest
npm init --yes

安装webpack的三件套

 npm install webpack webpack-cli webpack-dev-server -D

安装下html-webpack-plugin

npm install html-webpack-plugin -D

安装vue3、vue-loader、@vue/vue3-jest[1] 、@vue/test-utils[2]

npm install vue --save
npm install vue-loader @vue/vue3-jest @vue/test-utils -D

安装@babel/core、@babel/preset-env、babel-jest[3] ,注意这里的babel-jest，需要限制版本到27.0.6，不然会有兼容性问题

npm install @babel-core @babel/preset-env babel-jest@27.0.6 -D

安装jest，如果你全局没有安装，建议安装一个，这里注意需要把jest的包限制为27.0.5的版本，因为和vue-test-utils有兼容性问题

npm install jest -g
npm install jest@27.0.5 -D

那么所有依赖的包都安装完了，接下来该配置了。

另外安利下pnpm,如果你安装的包中存在依赖是你没安装的，会有提示。但有些包存在兼容性问题。。

配置#

配置webpack.config.js，先创建文件，然后将下面的代码copy到文件中。

 const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './main.js',
    output: {
        path: require('path').resolve(__dirname, './dist'),
        filename: '[name].[fullhash].js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
        }),
        new VueLoaderPlugin()
    ]
}

然后创建index.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack5-vue3-jest</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

创建main.js

 import { createApp } from 'vue'
import App from './views/App.vue'

const app = createApp({
    ...App
})

app.mount('#app')

创建views/App.vue

 <template>
    <div class="test" @click="onClick">
        {{ num }}
    </div>
</template>

<script setup>
import { ref } from 'vue'

const num = ref(0);

function onClick () {
    num.value += 1
}

</script>

然后在package.json中新增script

     "serve": "webpack-dev-server"

现在项目已经可以本机跑起来了，在终端输入npm run serve

然后我们来配置下jest相关的，如果你还不清楚jest是啥，可以先看下我之前的文章

坏蛋Dan：前端jest学习

创建babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }]
    ]
}

配置这个是为了jest的test文件中能使用esm，不然你的vue-test-utils就无法使用。

接着创建jest.config.js，如果你全局安装了jest，直接jest --init，然后在你的testEnvironments选项选择jsdom(browser-like)，这样才能支持浏览器端代码测试。

复制一下内容到文件中

module.exports = {
  // Automatically clear mock calls, instances, contexts and results before every test
  clearMocks: true,
  // An array of file extensions your modules use
  moduleFileExtensions: [
    "js",
    "mjs",
    "cjs",
    "jsx",
    "ts",
    "tsx",
    "json",
    "node",
    'vue'
  ],
  // The test environment that will be used for testing
  testEnvironment: "jest-environment-jsdom",

  // Options that will be passed to the testEnvironment
  testEnvironmentOptions: {},
  // A map from regular expressions to paths to transformers
  transform: {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "@vue/vue3-jest"
  },
};

moduleFileExtensions: 支持的文件，默认没有vue，得自己加上。
testEmvironment: 表示测试环境，默认jest-environment-node ，node环境。
transform: 需要转换的语法，而babel-jest则是将esm语法转换为cjs语法，vue3-jest则是将vue语法转换为js，少了这一步你的jest也无法运行。

jest`配置完后我们创建测试文件`__tests__/index.spec.js
 import { mount } from '@vue/test-utils'
import Index from '../views/App.vue'

test('test-click', async () => {
  const wrapper = mount(Index)
  console.log(wrapper.text())
  expect(wrapper.text()).toContain('0')
  await wrapper.trigger('click')
  expect(wrapper.text()).toContain('1')
})

引入我们的vue专属测试包vue-test-utils，将我们的组件导入到mount方法中，返回一个wrapper对象，然后模拟点击事件看结果。

最后在package.json中配置下script

     "test": "jest",

然后在终端运行测试下npm run test

测试成功！

到此就配置完了。

如果觉得对你有用，点个赞~谢谢！

参考#

^vue3-jest https://www.npmjs.com/package/vue3-jest
^vue-test-utils https://github.com/vuejs/test-utils
^babel-jest https://www.npmjs.com/package/babel-jest

编辑于 2022-10-22 21:43

const { VueLoaderPlugin } = require('vue-loader') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './main.js', output: { path: require('path').resolve(__dirname, './dist'), filename: '[name].[fullhash].js' }, mode: 'development', module: { rules: [ { test: /\.vue$/, use: ['vue-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './index.html', }), new VueLoaderPlugin() ] }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack5-vue3-jest</title> </head> <body> <div id="app"></div> </body> </html>

<template> <div class="test" @click="onClick"> {{ num }} </div> </template> <script setup> import { ref } from 'vue' const num = ref(0); function onClick () { num.value += 1 } </script>

module.exports = { // Automatically clear mock calls, instances, contexts and results before every test clearMocks: true, // An array of file extensions your modules use moduleFileExtensions: [ "js", "mjs", "cjs", "jsx", "ts", "tsx", "json", "node", 'vue' ], // The test environment that will be used for testing testEnvironment: "jest-environment-jsdom", // Options that will be passed to the testEnvironment testEnvironmentOptions: {}, // A map from regular expressions to paths to transformers transform: { "^.+\\.js$": "babel-jest", "^.+\\.vue$": "@vue/vue3-jest" }, };

jest`配置完后我们创建测试文件`__tests__/index.spec.js import { mount } from '@vue/test-utils' import Index from '../views/App.vue' test('test-click', async () => { const wrapper = mount(Index) console.log(wrapper.text()) expect(wrapper.text()).toContain('0') await wrapper.trigger('click') expect(wrapper.text()).toContain('1') })