如何使用Vue测试库测试应用程序？

.quantity-wrapper{margin:2emauto;宽度：50%；显示：弹性；justify-content:center;}.quantity-wrapperdiv{margin-right:2em;}.quantity-input{margin-left:0.5em;}.quantity-wrapperbutton{margin-right:1em;}button{cursor:pointer;}阅读之前，你应该具备：了解vue相关知识熟悉测试APP的UI按照惯例，在Vue生态中，当你想要测试应用时，可以使用@vue/test-utils-Vue的官方测试库。这个库提供了相关的API供用户测试渲染后的Vue组件实例。例如：//example.spec.jsimport{shallowMount}from'@vue/test-utils'importHelloWorldfrom'@/components/HelloWorld.vue'describe('HelloWorld.vue',()=>{it('通过时呈现props.msg',()=>{constmsg='newmessage'constwrapper=shallowMount(HelloWorld,{propsData:{msg}})expect(wrapper.text()).toMatch(msg)})})可以看到我们在项目开发代码中使用了@vue/test-utils库提供的shallowMount函数来加载渲染Vue组件。上述测试Vue组件的方法的问题在于，用户最终在不知道Vue如何呈现UI的情况下与DOM进行交互。相反，一般只能通过页面上的文本内容、输入框的标签以及其他一些可见的视觉线索来判断对应的UI元素是否可见。更好的方法是为您的Vue应用程序编写测试用例，以反映真实用户如何与之交互，例如在结帐页面中寻找增加购买产品数量的按钮，因此需要Vue测试库。什么是Vue测试库？Vue测试库是Vue的轻量级测试库，提供基于@vue/test-utils的轻量级实用函数。它是根据一个简单的指导原则创建的：您的测试与软件的使用方式越相似，它们给您的信心就越大。—testing-library.com为什么要使用Vue测试库？你想写的测试用例不需要你需要关注实现细节，即测试方法是如何实现的，而不是它是否产生了预期的结果。你想针对实际的DOM节点编写测试，而不是渲染的Vue组件。您想要编写以与用户相同的方式查询DOM的测试。Vue测试库如何工作Vue测试库通过提供查询DOM的功能来工作，就像用户与之交互的方式一样。这些有用的函数允许您通过标签文本查找元素，从它们的文本内容中查找链接和按钮，并断言对Vue应用程序的完全访问。对于无法通过文本内容或标签查找元素或其他不切实际的情况，Vue测试库提供了一种推荐的方法，通过使用data-testid属性作为标签来查找这些元素。data-testd属性被添加到您计划在测试中查询的HTML元素。比如CheckOut开始使用Vue测试库既然你明白了为什么要使用Vue测试库以及它是如何工作的，那么让我们在新的Vue中创建一个Vue项目CLI配置在.首先，我们将通过在终端中运行以下命令来创建一个新项目（假设您的机器上安装了VueCLI）vuecreatevue-testing-library-demo为了运行测试，我们将使用Jest，它是由Facebook测试运行器开发。VueCLI有一个插件可以轻松配置Jest。我们来添加这个插件：vueaddunit-jest添加完成后，你会发现在package.json中添加了一个新的脚本："test:unit":"vue-cli-servicetest:unit"，这个脚本用于运行测试用例。它还在src中添加了一个新的测试文件夹，并在测试文件夹中添加了一个单元文件夹，其中包含一个名为example.spec.js的示例测试文件。基于Jest的配置，当我们运行npmruntest:unit时，Jest会在tests目录中查找文件并运行测试文件。让我们运行示例测试文件：npmruntest:unit这应该运行test/unit目录中的example.spec.js测试文件。让我们看看这个文件的内容。import{shallowMount}from'@vue/test-utils'importHelloWorldfrom'@/components/HelloWorld.vue'describe('HelloWorld.vue',()=>{it('rendersprops.msgwhenpassed',()=>{constmsg='newmessage'constwrapper=shallowMount(HelloWorld,{propsData:{msg}})expect(wrapper.text()).toMatch(msg)})})默认情况下，使用VueCLI插件安装Jest会安装@vue/test-utils，所以上面的测试文件使用了@vue/test-utils中的showMount函数。但是我们想使用Vue测试库而不是@vue/test-utils。为此，我们将卸载@vue/test-utils因为我们不需要它。npmuninstall@vue/test-utils--save-dev然后，我们安装Vue测试库npminstall@testing-library/vue--save-dev接下来，我们修改tests/unit/example.spec.js为：import{render}from'@testing-library/vue'importHelloWorldfrom'@/components/HelloWorld.vue'describe('HelloWorld.vue',()=>{it('rendersprops.msgwhenpassed',()=>{constmsg='newmessage'const{getByText}=render(HelloWorld,{props:{msg}})getByText(msg)})})再次运行测试，它应该通过。让我们看看我们做了什么：我们使用Vue测试库公开的渲染函数来渲染HelloWorld组件。render是渲染Vue组件的唯一方式。调用render时，需要传入Vue组件和一个可选的options对象。然后，我们使用选项对象来传递HelloWorld组件所需的参数。render将返回一个带有辅助方法的对象来查询DOM，其中一个方法是getByText。最后，我们使用getByText断言DOM中是否存在带有“新消息”文本内容的元素。到目前为止，您可能已经注意到从考虑测试渲染的Vue组件到用户在DOM中看到的内容的转变。这种转变将允许您从用户的角度来测试您的应用程序，而不是专注于实现细节。我们的演示应用程序现在我们已经确定了如何使用Vue测试库在Vue中完成测试，我们将继续测试演示应用程序。但首先，我们将充实应用程序的用户界面。我们的演示应用程序是一个简单的产品结帐页面。我们会测试用户是否可以在结账前增加商品的数量，是否可以看到商品名称和价格等，让我们开始吧。首先，在components/目录中创建一个名为checkout的新Vue组件，并向其中添加以下代码段：