前端如何进行单元测试？

　　Karma是一个测试工具，能让你的代码在浏览器环境下测试。代码可能是设计在浏览器端执行的，在node环境下测试可能有些bug暴露不出来；另外，浏览器有兼容问题，karma提供了手段让你的代码自动在多个浏览器（chrome，firefox，ie等）环境下运行。如果你的代码只会运行在node端，那么你不需要用karma。

　　通过Karma测试项目, 需要在项目中添加配置f.js的文件。推荐使用karam init命令生成初始化的配置文件。下面是, karam init 命令的配置项。生成配置文件之后, 就可以通过npm run test:unit命令进行单元测试了。

　　如果测试发送在浏览器环境, Karma会将测试文件, 模拟运行在浏览器环境中。所以推荐使用webpack, babel, 对测试文件进行编译操作。Karma中提供了处理文件中间件的配置。ps: 之前由于浏览器环境不支持require, 而我在test文件中使用了require, 并且我没有将测试文件进行编译, 耽误了我半天的时间:(

　　我们首先通过vue-cli初始化我们的项目, 这里我使用的是vue-cli2.x的版本, 3.x的版本vue-cli对webpack的配置作出了抽象, 没有将webpack的配置暴露出来, 我们会很难理解配置。如果需要使用vue-cli3.x集成karma, 则需要另外的操作。

　　对于vue-cli3我尝试自己添加f.js的配置, 虽然可以运行，但是存在问题。issue中, 官方建议我在vue-cli3版本中使用vue-cli的karma的插件解决。

　　对于$router以及$route, 我们也可以通过mocks进行伪造, 并注入到组件的实例中

　　对于Vuex的测试, 我们需要明确一点我们不关心这个action或者mutation做了什么或者这个store是什么样子的, 我们只需要测试action将会在适当的时机触发。对于getters我们也不关心它返回的是什么, 我们只需要测试这些getters是否被正确的渲染。更多细节请查看文档。

　　每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。