前端自动化测试：TDD 和 BDD 哪个更好一些？

大家好，我是小静，今天整理了一份前端自动化测试手册，希望能对你有帮助！

这里赠送一套软件测试相关资源：

软件测试相关工具
软件测试练习集
深入自动化测试
Python学习手册
Python编码规范
大厂面试题和简历模板
关注我公众号：【程序员小濠】即可免费领取！
交流群：175317069

Vue 应用测试

​项目环境搭建

运行 vue create [project-name] 来创建一个新项目。选择 "Manually selectfeatures" 和 "UnitTesting"，以及 "Jest" 作为 test runner。

一旦安装完成，cd 进入项目目录中并运行 yarn test:unit。

通过 jest 配置文件：

\jest.config.js ==> node_modules\@vue\cli-plugin-unit-jest\jest-preset.js ==> \node_modules\@vue\cli-plugin-unit-jest\presets\default\jest-preset.js

jest-preset.js 文件就是 Vue 项目创建后，默认的 jest 配置文件：

module.exports= {
  // 可加载模块的后缀名
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    // tell Jest to handle *.vue files
    'vue'
  ],
  // 转换方式
  transform: {
    // process *.vue files with vue-jest
    // 如果.vue结尾的，使用vue-jest进行转换
    '^.+\\.vue$': require.resolve('vue-jest'),
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
    require.resolve('jest-transform-stub'),
    '^.+\\.jsx?$': require.resolve('babel-jest')
  },
  // 转换时忽略文件夹
  transformIgnorePatterns: ['/node_modules/'],
  // support the same @ -> src alias mapping in source code
  // webpack 的别名映射转换
  moduleNameMapper: {
    '^@/(.*)$':'/src/$1'
  },
  // 指定测试环境为 jsdom 
  testEnvironment:'jest-environment-jsdom-fifteen',

​  // serializer for snapshots
  // 快照序列化器
  // 使用 jest-serializer-vue 进行组件快照的序列化方式
  // 就是将组件转为字符串,后面进行快照测试时,就可以看到了
  snapshotSerializers: [
    'jest-serializer-vue'
  ],​

  // 测试代码文件在哪里
  testMatch: [
    '**/tests/unit/**/*.spec.[jt]s?(x)',
    '**/__tests__/*.[jt]s?(x)'
  ],
  // https://github.com/facebook/jest/issues/6766  testURL:'http://localhost/',
  // 监视模式下的插件
  watchPlugins: [
    require.resolve('jest-watch-typeahead/filename'),
    require.resolve('jest-watch-typeahead/testname')
  ]
}
复制代码

快速体验

默认测试用例：tests\unit\example.spec.js

//tests\unit\example.spec.js
// 导入组件挂载器，不用手动写vue入口
import { shallowMount } from'@vue/test-utils'
// 导入要测试的组件
import HelloWorld from'@/components/HelloWorld.vue'​

describe('HelloWorld.vue', () => {
  it('rende