使用 TailwindCSS 3 运行 Cypress 测试

Mic*_*ays 5

您可以使用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/ponent.js，并在您的cypress.json配置文件中指定：

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

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