Debug Jest Tests — Three Methods

同学们，今天我们来看一下在Lightning Web Components里调试测试代码的三种方法。每种方法适合的场景不太一样，我会用最简单的话帮你们梳理清楚。 第一种，也是最简单的一种，就是直接在我们已经装好的VS Code扩展包里操作。你打开一个测试文件，在左侧的LWC测试侧边栏里，对着代码的行号点一下就能加上断点，像平时调试那样。然后，注意看这个侧边栏上有一个按钮叫“运行测试”，点它就行。运行起来之后，VS Code会弹出运行视图，里面有监视表达式、调试工具栏，还有一个控制台，你可以实时查看变量、逐步执行代码，非常直观。这是最适合日常开发的方式。 第二种，是使用Chrome的开发者工具来调试。这种方式需要你先在命令行执行一条命令：`npm run test:unit:dev`，它会启动一个带调试模式的测试服务。接着，在Chrome浏览器地址栏输入`chrome://inspect`，进去后就能找到对应的目标，点击连接就能开始调试了。这里有一个非常重要的点要记住：你平时在VS Code里点的行号断点，在这个方式下是不起作用的。你需要自己在代码里写上`debugger;`这个关键字，当程序执行到这一行，它就会自动停住，然后你就能在Chrome DevTools里一步一步检查变量了。 第三种，是一种更高级的配置方式，适合对项目有定制需求的同学。你需要自己创建两个文件，一个叫`launch.json`，是VS Code的启动配置文件；另一个是`jest.unit.js`，用来给Jest测试做一些额外设置。配置好之后，同样需要用`debugger;`来声明断点，因为编译后的代码行号和你的源代码是对不上的，所以行号断点也不可靠。虽然配置起来稍微麻烦一点，但一旦配好，你也能像第一种方法那样逐步执行测试，并在运行时检查所有变量。 总结一下：这三种方法最后都能让你一步一步地执行测试，并且在运行时查看变量。只是方式和应用场景不同。日常开发优先用VS Code侧边栏，最省事；需要单独调试或者协作排查问题时，可以试试Chrome DevTools；有特殊工程化需求的时候，再去配置高级方案。好了，这一页的内容就到这里，大家如果有疑问，可以随时提出来。