2

我已经运行cypress open-ct了一段时间的组件测试，依赖于导入/node_modules/tailwindcss/dist/tailwindcss.min.css.

由于升级到 Tailwind v3，我的一些测试失败了，因为没有可以导入的预构建 CSS 文件 - 一切都是及时生成的。

例如，当单击固定且全宽的覆盖时，测试模态是否关闭失败，因为整个模态被渲染，赛普拉斯无法访问它。

另一个因无法访问 Tailwind 类而产生的附带问题是，在 CI 中运行测试时录制的视频无法使用，因为它们只是一堆随机的原生元素。

我一直在每个测试文件的顶部像这样导入 Tailwind（在描述之前）

import { mount } from '@cypress/vue'
import '/node_modules/tailwindcss/dist/tailwind.min.css'
import MultiSelectField from './MultiSelectField.vue'
import { ref } from "vue";

任何想法如何包含 Tailwind（最好是全球性的）以便测试不会失败？

4

2 回答 2

3

您可以使用Tailwind CLI即时生成样式表。

添加此插件cypress/plugins/tailwind.js（确保将-i源代码从更改./src/styles/globals.css为您的基本 CSS 文件）：

before(() => {
  cy.exec('npx tailwindcss -i ./src/styles/globals.css -m').then(
    ({ stdout }) => {
      if (!document.head.querySelector('#tailwind-style')) {
        const link = document.createElement('style')
        link.id = 'tailwind-style'
        link.innerHTML = stdout

        document.head.appendChild(link)
      }
    },
  )
})

然后，通过将其导入来加载插件cypress/support/index.js：

import '../plugins/tailwind'

您还应该为您的组件测试设置一个单独的配置文件，例如cypress/support/component.js，并在您的cypress.json配置文件中指定：

{
  "component": {
    "supportFile": "cypress/support/component.js",
  },
  "e2e": {
    "supportFile": "cypress/support/e2e.js"
  }
}

然后，只包含import '../plugins/tailwind'在您的cypress/support/component.js配置文件中，这样您就不会为您的 E2E 测试执行 JIT 编译（因为它是不必要的）。

于 2022-01-12T19:34:15.830 回答
0

我看到你正在使用import '/node_modules/tailwindcss/dist/tailwind.min.css'which 需要一个预编译的包。如果您在顺风配置中添加了任何自定义，则不会涵盖这些。

但是如果你不能使用生成的 css 并且没有任何顺风自定义，你可以使用来自的 cdn 版本https://cdn.tailwindcss.com/

因为您在测试中运行它并且不想增加使用远程依赖的可能“不稳定”，所以您可能希望下载该文件并将其保存在存储库中并不时手动更新它。在运行测试之前，您还可以使用一些自动化从 cdn 获取正确的版本，但理想情况下，您会使用生成的 css，因为这就是您要交付的内容，因此这是应该进行测试的资源。

于 2021-12-10T15:58:13.140 回答