单元测试（jest）：理解、安装、使用

Myth丶恋晨 2024-04-01 18:42 79阅读 0赞

**一、理解单元测试的重要性**

bug发现在开发阶段，成本很低，  
如果发现在生产环境，成本很高，  
如果是关键时刻，决定人生命运，决定企业发展。

从技术的角度讲，有效的提高代码的健壮性，有效的增加代码的可维护性，对于后期的代码重构是必要条件。

从团队的角度讲，开发人员的代码经过完整的单元测试，可以有效的减少测试成本，维护成本，运维成本，运营成本。

不要存在bug不会被发现的侥幸心理，我的经验，bug不是在开发阶段发现就是在测试阶段发现，不是在测试阶段发现就是在生产环境被用户发现。终究会暴露，越早越好。

写了单元测试，我们可以有信心（有依据）的告诉用户我的程序是多么的健壮。  
写了单元测试，我们可以有效的培养自己做人、做事的高度。  
写了单元测试，是我们工匠精神的体现。

**二、jest与项目环境介绍**

2.1、Jest：Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。

2.2、环境：vue3 + ts + vite2 + pinia + **jest** \+ pnpm

**三、jest单元测试实践**

**3.1、安装**

> pnpm add babel-jest@latest jest@latest ts-jest@latest -D  
> pnpm add @babel/core @babel/preset-env babel-plugin-transform-es2015-modules-commonjs @vue/test-utils @vue/vue3-jest jest-transform-stub @types/jest -D

jest：提供单元测试能力  
ts-jest：Typescript 开发语言的预处理器  
@vue/test-utils：对 Vue 组件进行测试（Vue 官方提供）  
@vue/vue3-jest：将 Vue SFC（单文件组件）转换为 Jest 可执行的 JavaScript 代码  
babel-jest：将非标准 JavaScript 代码（JSX/TSX）转换为 Jest 可执行的 JavaScript 代码  
@babel/preset-env：提供测试时最新的 JavaScript 语法的 Babel Preset  
@babel/preset-typescript：提供测试时TypeScript 语法的 Babel Preset  
@vue/babel-plugin-jsx：提供测试时在 Vue 中使用 JSX/TSX 语法的 Babel Plugin  
@vitejs/plugin-vue-jsx：提供开发时在 Vue 中使用 JSX/TSX 语法的 Vite Plugin  
jest-transform-stub：将非 JavaScript 文件转换为 Jest 可执行的 JavaScript 代码

![a2eb26106ce14edd9b388aea195a3a62.png][] ![0db97a17bea6449980a71bca65029108.png][]

3.2、根目录新建jest.config.js

export default {
        preset: 'ts-jest',
        roots: ['<rootDir>/tests/'],
        clearMocks: true,
        moduleDirectories: ['node_modules', 'src'],
        moduleFileExtensions: ['js', 'ts', 'vue', 'tsx', 'jsx', 'json', 'node'],
        modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
        testMatch: [
          '**/tests/**/*.[jt]s?(x)',
          '**/?(*.)+(spec|test).[tj]s?(x)',
          '(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$',
        ],
        testPathIgnorePatterns: [
          '<rootDir>/tests/server/',
          '<rootDir>/tests/__mocks__/',
          '/node_modules/',
        ],
        transform: {
          '^.+\\.ts?$': 'ts-jest',
          '^.+\\.vue$': '@vue/vue3-jest',// 使用 vue-jest 帮助测试 .vue 文件
          '^.+\\.(js|jsx)?$': 'babel-jest',// 遇到 js jsx 等转成 es5
          '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',// 遇到 css 等转为字符串 不作测试
        },
        transformIgnorePatterns: ['<rootDir>/tests/__mocks__/', '/node_modules/'],
        // A map from regular expressions to module names that allow to stub out resources with a single module
        moduleNameMapper: {
          '\\.(vs|fs|vert|frag|glsl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
            '<rootDir>/tests/__mocks__/fileMock.ts',
          '\\.(sass|s?css|less)$': '<rootDir>/tests/__mocks__/styleMock.ts',
          '\\?worker$': '<rootDir>/tests/__mocks__/workerMock.ts',
          '^/@/(.*)$': '<rootDir>/src/$1',
        },
        testEnvironment: 'jsdom',
        verbose: true,
        collectCoverage: false,
        coverageDirectory: 'coverage',
        collectCoverageFrom: ['src/**/*.{js,ts,vue}'],
        coveragePathIgnorePatterns: ['^.+\\.d\\.ts$'],
      }

3.3、根目录新建babel.config.js

module.exports = {
        presets: [
            [
                "@babel/preset-env",
                {
                    targets: {
                        node: "current"
                    }
                }
            ]
        ],
        plugins: ["transform-es2015-modules-commonjs"]
      }

3.4、package.json

![8a9ec192700d493a89b605c3a3352536.png][]

> "unit:test": "jest"

3.5、根目录创建tests文件，用来放单元测试文件

![c21b63f5b2844e609aad751417b55bd9.png][]

3.6、创建一个utils

src/utils/index.ts

// 数字千位分隔显示123456 =》123,456
      export const formatNumber=(value: string) =>{
        value += '';
        const list = value.split('.');
        const prefix = list[0].charAt(0) === '-' ? '-' : '';
        let num = prefix ? list[0].slice(1) : list[0];
        let result = '';
      
        if (num.length > 3) {
          result = `,${num.slice(-3)}${result}`;
          num = num.slice(0, num.length - 3);
        }
      
        if (num) {
          result = num + result;
        }
      
        return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
      }

3.7、创建utils的单元测试

tests/units.spec.ts

import {formatNumber} from '../src/utils/index'
    test('格式化数字123456显示为123,456', () => {
      expect(formatNumber('123456')).toBe('123,456');
    })

3.8、运行pnpm unit:test

> pnpm unit:test

![3830ba8ef0184587bd462c8681b2934a.png][]

**测试通过**

**四、过程记录**

**4.1、**

![e9ef721044dd4a0694286d1d0bb15bb5.png][]

解：我理解，我项目是vite项目，不是vue-cli项目，不能使用这个命令安装jest

**4.2、**

![dbc5c4b18ad64e23bc1e5c49182292e3.png][]

解：

> pnpm add @types/jest

![c691ac21fd6448898ce1d7c5bc48ec09.png][]

**4.3、**

![b84db6c8b13a4e70867f7ca22fc230d2.png][]

解：jest升级版本超过27出现的问题

> pnpm add jest-environment-jsdom

[javascript - 将 Jest 升级到 v28 - 找不到错误测试环境 jest-environment-jsdom - 堆栈内存溢出][javascript - _ Jest _ v28 - _ jest-environment-jsdom -]

**4.4、**另外一个项目尝试使用jest遇到问题如下，未解决

处理require is not defined in ES module scope， you can use import instead报错

![d884be9cf8d446d3aa740c7610376434.png][]

> pnpm add @babel/plugin-transform-modules-commonjs

package.json增加配置

"babel": {
        "plugins": [
          "@babel/plugin-transform-modules-commonjs"
        ]
      }

尝试了一些方法，没有成功，，后来更改了jest.config.js配置，避免了这个问题

**4.5、**

vue-cli项目可以使用如下命令增加jest单元测试能力：

> vue add @vue/cli-plugin-unit-jest

未测试

**4.6、**

记得之前创建项目的时候可以选择测试工具，这里我们也尝试一些，没有发现，所以我们自己安装jest

> pnpm create vite

![870a29bbcc7e43e6b15908a816d11a8b.png][]

亲测，新建项目，没有选择测试工具的选项，，如果后续有发现再补充

**五、欢迎交流指正，关注我，一起学习。**

**参考链接：**

[标签\[ts-jest\] 最普遍问题 - 堆栈内存溢出][ts-jest_ _ -]

[好文-vue3+vite+jest配置 单元测试总结\_火辣辣-的博客-CSDN博客\_vite 单元测试][-vue3_vite_jest_ _-_-CSDN_vite]

[@babel/plugin-transform-modules-commonjs · Babel 中文网][babel_plugin-transform-modules-commonjs _ Babel]

[vue3 + vite + typescript + eslint + jest 项目配置实践-技术圈][vue3 _ vite _ typescript _ eslint _ jest _-]

[关于Vue中用jest测试\_城北的徐公的博客-CSDN博客\_vue-jest][Vue_jest_-CSDN_vue-jest]

[Vue3项目实践jest，学会了升职加薪（上篇）\_梅花十三儿的博客-CSDN博客][Vue3_jest_-CSDN]

[vite + vue3 + ts + jest 测试 - boyyang - 博客园][vite _ vue3 _ ts _ jest _ - boyyang -]

[Jest入门文档 - 掘金][Jest_ -]

[【前端测试】第0章 - 为什么要做单元测试？\_哔哩哔哩\_bilibili][0_ - _bilibili]

[a2eb26106ce14edd9b388aea195a3a62.png]: https://img-blog.csdnimg.cn/a2eb26106ce14edd9b388aea195a3a62.png
[0db97a17bea6449980a71bca65029108.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e2041540f4bc4c6480cb7b01407d150f.png
[8a9ec192700d493a89b605c3a3352536.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8be00907af1848b68afe2344ed914017.png
[c21b63f5b2844e609aad751417b55bd9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bcc85ef9757a43d9bf808f513cb0246b.png
[3830ba8ef0184587bd462c8681b2934a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c04ff3badd044da6b6d6c50b07528b4c.png
[e9ef721044dd4a0694286d1d0bb15bb5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/349d87b8845d4176ad63ad10b1bbc42e.png
[dbc5c4b18ad64e23bc1e5c49182292e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/109bd7dc55614496b1480e77b28e9f85.png
[c691ac21fd6448898ce1d7c5bc48ec09.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a89f7341175442ce997c0dc71bac5b0a.png
[b84db6c8b13a4e70867f7ca22fc230d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fd2016b79a2d4c8ca1de4589cb21fae4.png
[javascript - _ Jest _ v28 - _ jest-environment-jsdom -]: https://stackoom.com/question/4s9zF
[d884be9cf8d446d3aa740c7610376434.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c4ce95f6e11b4a6a83884df37020b8cd.png
[870a29bbcc7e43e6b15908a816d11a8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cf3e3cb0d4cc41de872060e58d0cec4e.png
[ts-jest_ _ -]: https://stackoom.com/tag?tag=ts-jest&tab=Frequent
[-vue3_vite_jest_ _-_-CSDN_vite]: https://blog.csdn.net/weixin_39559449/article/details/126465458
[babel_plugin-transform-modules-commonjs _ Babel]: https://www.babeljs.cn/docs/babel-plugin-transform-modules-commonjs
[vue3 _ vite _ typescript _ eslint _ jest _-]: https://jishuin.proginn.com/p/763bfbd36bd5
[Vue_jest_-CSDN_vue-jest]: https://blog.csdn.net/qq_48959471/article/details/124620454
[Vue3_jest_-CSDN]: https://blog.csdn.net/Android062005/article/details/127182666
[vite _ vue3 _ ts _ jest _ - boyyang -]: https://www.cnblogs.com/boyyangD/articles/15747844.html
[Jest_ -]: https://juejin.cn/post/6844903636762361869
[0_ - _bilibili]: https://www.bilibili.com/video/BV1Ad4y1C7vY/?spm_id_from=..top_right_bar_window_custom_collection.content.click&vd_source=704e2597123fc066b03283e82eb866c0