新闻编辑室回到编辑室测试Lightning Web组件在Vlocity，Matt Goldspink专注于使用Salesforce的闪电技术开发漂亮的用户界面，随着Salesforce宣布对平台进行令人兴奋的更改，web开发总体上变得更加有趣。2019年2月12日Matt Goldspink首席工程师读10分钟作者：Vlocity首席工程师兼UI架构师Matt Goldspink对于任何有过Aura组件开发经验的人来说，他们可能会面临如何测试这些东西的问题！它们与平台的联系如此紧密，以至于无法轻松地单独进行测试。幸运的是，Lightning Web组件从一开始就内置了真正的TDD。编写测试和断言非常简单。更棒的是，如果你习惯用茉莉花、摩卡或笑话来写测试，那么你就可以在家里了。设置项目如果你还没有一个LWC项目，我建议遵循我之前的帖子。在这篇文章中，我们将采取我们在该项目中所做的，并逐步增加一些简单的单元测试，我们可以从你的计算机上的命令行运行…不需要上传代码到组织！首先我们需要添加一个项目.json归档到我们项目的根目录。如果你没有项目.json，只需运行npm init并遵循演练–大多数选项都可以默认设置。运行此命令后，您需要添加我们的测试依赖项。在命令行上运行：这将安装Jest（一个来自Facebook的流行测试框架，主要用于React）和Salesforce LWC Jest集成，包括编译器和引擎。现在打开你的包.json在"脚本"对象下添加一个测试：单位财产的价值只是"开玩笑"。最后一步是添加笑话.config.js归档到我们项目的根目录。内容应简单如下：这主要是样板，事实上Salesforce有一个更简单的选项，在Salesforce开发人员指南中有记录：sforce.co/2RPadyp公司使用此设置，您可以通过键入以下命令在命令行上运行测试：正如您所见，我们还没有任何测试，所以让我们添加一个。但是等等！有一个更简单的方法我们刚刚看到了很多配置-笑话.config.js文件和多个npm安装。我展示了上面的内容，以强调这只是标准的开源Jest工具——没有Salesforce专有的东西！然而，这并不意味着Salesforce的人不想让事情变得简单，他们已经做到了！实际上，您可以用一个简单的npm命令替换我们刚刚安装的所有内容：这将安装我们上次安装的所有东西，但在lwc jest wrapper命令之后。您可以安全地删除对@lwc/jest preset@lwc/module resolver@lwc/compiler@lwc/engine的引用包.json.接下来您可以删除笑话.config.js并更新您的包.json脚本为：现在当你运行npm运行测试：单位它将运行lwc jest cli命令，该命令将调用jest，并为您安装和配置所有内容！向LWC组件添加测试每个组件都可以包含它自己的测试套件，导航到您的组件，在我的项目中，我将使用一个非常简单的helloComponent，其内容如下：添加名为"测试"的文件夹。现在创建一个名为helloComponent.test.js:在此文件中，我们将添加第一个测试：这里有很多东西，让我试着把它分块描述一下：前两行从lwc框架导入createElement函数。这是一种魔力，它知道如何将LWC类转换为HTML元素。我们再往下用这个。第二行是如何导入要测试的组件。c/前缀只是它的名称空间——在Salesforce orgs中，默认名称空间通常是c。接下来我们添加我们的第一个描述，这实际上是我们测试所在的包装器。我们还在每个钩子后面加了一个钩子。这里的代码将在每次测试后运行，如注释中所述，它基本上重置DOM。换句话说，它将删除我们在每个测试之后呈现的所有LWC元素，以便下一个测试有一个干净的状态。终于我们的考验了！我们使用前面lwc导入中的createElement将HelloComponent转换为真正的DOM元素。然后我们把它插入页面的主体。最后，我们运行我们的断言——在本例中，我希望应该有一个文本内容为Hello，World的标记。如果你重新运行npm运行测试：单位你会得到一个很好的快乐测试！测试属性更改虽然通过测试很好，但它并不能真正涵盖我们的逻辑。我们应该做的一件事是验证如果我们将person属性设置为不同的值，那么该值也会反映在DOM中。让我们做一个新的测试。在现有测试之后，添加以下内容：这个测试和以前几乎一样，只是我们现在将元素上person的值改为Matt，并且我们正在更新我们的期望值以验证它现在显示Hello，Matt！相反。让我们运行它看看会发生什么：万岁——真管用！测试属性更改第2部分现在我想展示一些可能会吸引很多人的东西。让我们进行与刚才相同的测试，但我们要移动一行：我已经改变了元素.人=元素插入DOM后要运行的"Matt"行。如果现在运行测试，您应该看到：哦，天哪！失败了！！！移动一条线怎么会破坏测试？这个测试的两个版本之间的区别在于，在第一个版本的测试中，我们在将元素插入DOM之前设置了person的值，因此当插入元素时，它的值为Matt并立即呈现它。在第二个版本中，我们在插入元素之后设置person的值。这意味着需要重新呈现组件以更新DOM…并且呈现是异步的。因此，当我们在设置新值之后立即执行预期操作时，DOM没有被重新呈现，因此我们仍然看到Hello，World！。那我们怎么解决这个问题呢？我们需要在DOM更新之后运行我们的期望值。幸运的是，有一个很好的简单的方法来做到这一点…用承诺。让我们看看这个更新的测试是什么样子的：基本上，我们的下一个断言将立即运行在我们的下一个断言上。如果现在运行测试，您将看到2个通过测试：本文中的所有代码都可以作为github项目供您克隆和运行：比特/2tcSHKq下一步行动在我们的测试中，我们可以做很多事情，我将在以后的文章中介绍这些事情，包括：触发、捕获和断言事件模仿Salesforce的Lightning组件模拟数据源我强烈建议您阅读Salesforce自己的一些示例测试，比如在电动自行车应用程序中。以下是一些附加链接以获取更多信息：Salesforce开发人员指南-测试Lightning Web组件Ebikes中的示例笑话测试Jest文档请求演示了解更多销售人员Lightning Web组件