如何用柏树测试故事书

故事书对于开发Web应用程序的团队来说非常有用。但就像任何软件一样，它在未经测试的情况下很容易腐烂。在我目前的项目中，我终于有了一个很好的方法来测试它。这是怎么做的！

我们的项目团队从“故事书”中获益良多。它是开发UI组件的工具，它是生活风格指南，它可以帮助与其他学科的团队成员协作，比如设计师和业务分析师。

随着团队对Storybook的使用范围扩大，保持其活力和健康变得更加重要。StoryBook实际上是另一个与您的Web应用程序共享代码的应用程序，因此：

希望第一个问题的答案是CI会失败。如果您没有在CI中执行Storybook构建，那么一定要立即执行。

但是#2有点棘手。“当我下一次使用它来构建组件时，我会注意到的”是一个糟糕的答案。“当项目经理试图将其用于重要的演示时，我们会注意到”是更糟糕的。

直到最近，我还没有一个很好的答案。我的团队已经几次无意中破坏了Storybook，可能是在调整一些webpack配置或更新包时。如果我们都在做后端故事，那么一两周后就会有人注意到。然后有人试图使用它，而…。

但是现在，我终于有了一个测试童话书的好方法！我使用的是Cypress，与我们已有的用于测试应用程序的浏览器测试框架相同。

我假设您已经在使用Cypress测试您的应用程序了。首先，创建第二个Cypress配置，指向您的StoryBook服务器的URL并引用单独的IntegrationFolder：

"；脚本"；：{"；START：START：START-STORYBOOK"；："；START-STORYBOOK-p9009-s public--ci"；，"；Cy：TEST：STORYBOOK"；："；柏树Run--Headless-C cypress.storybook.json"；，"；ci：Start-and-Test-Storybook"；："；交叉环境START_SERVER_AND_TEST_INSECURE=1纱线START-SERVER-AND-TEST START：STORYBOOK http://localhost:9009 Cy：TEST：TEST：STORYBOOK"；，//(.)}。

(Cross-env提供了一种可移植的方法来设置环境变量，start-server-and-test完全按照它的意思执行。)。

//cypress/storybook/storybook.spec.ts/*Storybook测试**Storybook实际上是一个完全独立的应用程序*具有自己的构建配置。实际上，在我们开发应用程序、更新依赖关系等过程中，它可能会崩溃。**这项测试旨在发现它何时崩溃，至少在最基本、最容易检测的方式下是这样。**(例如，当默认故事无法呈现时)*/https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/const getIframe Document=()=>；cy.get("；#storybook-preview-iframe"；).its("；0.contentDocument"；).should("；exist"；)；const getIframe Body=()=>；getIframe Document().its("；body"；).should("；not.be.undefined"；).then(cy.wrap)；describe("；Storybook"；，()=>；{it("；访问故事书"；，()=>；{cy.access("；/"；)；cy.get("；#explorerbasic-elements--paragraphs-and-links"；).click()；getIframe Body().应该("；包含.text"；，"；Lorem ipsum"；)；cy.get("；#basic-elements--headings"；).click()；getIframeBody().find("；h2"；).should("；contain.text"；，"；标题2"；)；})；})；

使用StoryBook的IFRAME有点棘手，但上面的功能在我们Mac、Windows和Linux上Cypress的默认无头电子浏览器上运行得很可靠。

有了这一点，我的团队已经能够在CI中立即检测到Storybook的损坏，而不是等到人们指望它来完成他们的工作时再过很长时间。

目前，该测试只执行几次粗略的抽查，但它足以发现像上面屏幕截图中那样的大问题。如果我们将来想要添加更多的Cypress Storybook测试，它也建立了一个立足点。

当你在应用程序的另一个领域工作时，你有没有遇到过Storybook突然中断的情况？我鼓励您像测试其他软件一样测试它。这种方法应该可以用于其他浏览器测试框架(如Selenium)。