介绍
@dc0de/jest-preset 是一款用于 jest 单元测试框架的预设 preset，提供了一些内置的插件和配置项，使得使用 jest 进行前端单元测试变得更加简单方便。
安装
使用 npm 安装 @dc0de/jest-preset：
npm install -D @dc0de/jest-preset
配置
在项目的 jest.config.js 中配置 @dc0de/jest-preset：
module.exports = {
preset: '@dc0de/jest-preset',
// 其他配置项（可选）
};@dc0de/jest-preset 内置了许多实用的插件和配置项，可以帮助我们更加高效地进行单元测试。
配置插件
@dc0de/jest-preset 内置了以下插件：
jest-environment-jsdom-sixteen使用 JSDOM 进行 DOM 操作时需要的环境插件；jest-serializer-vue用于序列化 Vue 组件，使其在测试中更易读；jest-transform-stub用于测试时忽略某些模块的转换器，避免测试过程中编译失败；jest-transform-vue-jest用于将 Vue 单文件组件编译成 JavaScript，便于测试；jest-watch-typeahead让 jest watch 模式更聪明、更快速，可以很方便快捷地选择你想要执行的测试用例。
可以通过在 jest.config.js 中配置 setupFilesAfterEnv 来启用这些插件：
module.exports = {
preset: '@dc0de/jest-preset',
// 其他配置项（可选）
setupFilesAfterEnv: ['@dc0de/jest-preset/lib/jest-plugins.js'],
};配置 Jest
除了插件，@dc0de/jest-preset 还可以帮助我们配置 Jest，使得单元测试更加顺畅高效。
配置模块名称映射
在模块化开发中，我们常常会使用别名来代替繁琐的相对路径：
import Button from '@/components/Button.vue';
在 Jest 测试中，我们也可以使用别名来引入模块。@dc0de/jest-preset 使用 moduleNameMapper 配置项来实现这一功能：
module.exports = {
preset: '@dc0de/jest-preset',
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
};这样，在 Jest 中就可以像这样引入模块了：
import Button from '@/components/Button.vue';
配置快照测试
快照测试是 Jest 中一种非常便捷的测试方式，能够自动生成组件的渲染快照，避免手工测试耗费过多时间和精力。@dc0de/jest-preset 帮助我们配置了默认的快照配置项，可以直接使用：
module.exports = {
preset: '@dc0de/jest-preset',
snapshotSerializers: ['jest-serializer-vue'],
};在测试中使用 toMatchSnapshot() 函数即可生成快照：
it('renders correctly', () => {
const wrapper = mount(Button, { props: { text: 'Hello' } });
expect(wrapper.html()).toMatchSnapshot();
});配置测试覆盖率
测试覆盖率是衡量测试用例是否覆盖了源代码的比例，是衡量测试用例质量的重要指标之一。@dc0de/jest-preset 内置了覆盖率统计插件 istanbul，可以帮助我们更好地统计测试覆盖率。在 jest.config.js 中配置：
module.exports = {
preset: '@dc0de/jest-preset',
collectCoverage: true,
coverageReporters: ['html', 'text'],
};这样，在执行测试时就会同时生成覆盖率报告：
PASS src/components/Button/Button.spec.js ------------------------|---------|----------|---------|---------|------------------- File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s ------------------------|---------|----------|---------|---------|------------------- All files | 100 | 100 | 100 | 100 | Button.vue | 100 | 100 | 100 | 100 | Button.spec.js | 100 | 100 | 100 | 100 | ------------------------|---------|----------|---------|---------|-------------------
示例
我们现在来看一个简单的组件测试场景。以下是一个 Button.vue 组件和 Button.spec.js 测试用例：
Button.vue：
-- -------------------- ---- -------
----------
---------- ---- -----------
-----------
--------
------ ------- -
------ -
----- -------
--
--
---------Button.spec.js：
import { mount } from '@vue/test-utils';
import Button from '@/components/Button.vue';
it('renders correctly', () => {
const wrapper = mount(Button, { props: { text: 'Hello' } });
expect(wrapper.html()).toMatchSnapshot();
});执行测试：
-- -------------------- ---- ------- - --- --- ---- ---- ------------------------------------ - ------- --------- --- --- ------------------------------------------------------------------------------------- ---- - - ----- - - ------ - - ----- - - ----- - --------- ---- -- ------------------------------------------------------------------------------------- --- ----- - --- - --- - --- - --- - ---------- - --- - --- - --- - --- - -------------- - --- - --- - --- - --- - ------------------------------------------------------------------------------------- ---- ------- - ------- - ----- ------ - ------- - ----- ---------- - ------- - ----- ----- ----- -- --------- - -
可以看到，我们成功地写出了一个单元测试用例，并使用 @dc0de/jest-preset 进行了配置。这个测试用例包括了组件的渲染和快照测试，覆盖率达到了 100%。
总结
@dc0de/jest-preset 是一个非常实用的 Jest preset，它内置了许多实用的插件和配置项，可以帮助我们更加方便地进行前端单元测试，提高测试用例的质量和效率。建议在前端单元测试时使用它，提升开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/dc0de-jest-preset