使用 Tailwind 对 Nuxt 进行 Cypress 组件测试

Posted

技术标签:

【中文标题】使用 Tailwind 对 Nuxt 进行 Cypress 组件测试【英文标题】:Cypress component tests for Nuxt with Tailwind 【发布时间】:2021-11-26 11:54:42 【问题描述】:

我正在尝试为 Nuxt 应用设置赛普拉斯组件测试。它可以工作,但我的样式几乎都不起作用,因为它们依赖于 Tailwind 以及我的自定义 tailwind.config.js

这是我的cypress/plugins/index.js

const  startDevServer  = require('@cypress/webpack-dev-server');
const  getWebpackConfig  = require('nuxt');

module.exports = (on, config) => 
  on('dev-server:start', async (options) => 
    const webpackConfig = await getWebpackConfig();
    return startDevServer(
      options,
      webpackConfig,
    );
  );
  return config;
;

如何在自定义配置中包含 Tailwind?当我们在做的时候:如何在我的所有组件测试中包含一个额外的全局 .scss 文件?

【问题讨论】:

【参考方案1】:

您可以通过将样式直接导入到您的测试文件中来使它们生效,如下所示:

// YourComponent.spec.js
import 'tailwindcss/dist/tailwind.min.css'
import '@/assets/css/tailwind.css'

我正在研究一种在全球范围内添加这些样式的方法,所以如果我找到了一些东西,我一定会在这里发布。


更新答案

将以下内容添加到您的 nuxt.config.js 文件中的构建设置中。

// nuxt.config.js

import  join  from 'path'

...

plugins: 
  tailwindcss: join(__dirname, 'tailwind.config.js'),
  ...
,

如果您为 tailwindcss 启用了 jit 模式,请确保将适当的清除路径添加到您的 tailwind 配置中。对我来说,它是在无限循环中加载的,在更具体地指定了这些路径之后,它被整理出来了。另见tailwind docs。

// tailwind.config.js

purge: [
  './components/**/*.vue', 
  './layouts/**/*.vue', 
  './pages/**/*.vue'
],

【讨论】:

谢谢。但是,这需要我预编译顺风样式表,不是吗?否则,它将如何获取我的自定义配置?不应该有办法在测试设置 webpack 配置中进行配置吗? 这可能是真的。就我而言,这很有效,因为我需要测试 tailwind 的一些默认“可见性”功能,以查看某个元素在某些设备上是否可见。我也觉得应该有办法使用webpack config,但是我还没有找到。 今天终于有时间解决这个问题了。在我的项目中,我必须将 tailwindcss 添加到 nuxt.config.js 文件中的 postcss 插件中。我会更新我的答案。 太好了,这行得通。如果您不想在每个单独的组件测试中导入样式表,您可以在组件测试支持文件中导入它们一次。我在cypress/componentTests/support/index.js 创建了一个仅用于组件测试的单独支持文件,并在cypress.json"component" 选项下对其进行了配置。不过,我仍在努力整合github.com/nuxt-community/fontawesome-module。有什么想法吗? 我实际上已经让 nuxt-community/fontawesome-module 也能正常工作,至少有一个解决方法。在引擎盖下它使用github.com/FortAwesome/vue-fontawesome,所以我也在cypress/componentTests/support/index.js 中导入它并按照此处所述使用它:github.com/FortAwesome/…。它不会自动从nuxt.config.js 文件中提取模块配置,但至少现在组件测试中会显示字体很棒的图标。

以上是关于使用 Tailwind 对 Nuxt 进行 Cypress 组件测试的主要内容,如果未能解决你的问题,请参考以下文章

Tailwind+ Nuxt:@apply 不适用于所有课程

Nuxt s-s-r 设置导致 Tailwind 媒体查询崩溃

如何使用 Tailwind 和 Nuxt.js 突出显示导航栏上的活动部分?

Tailwind CSS Nuxt 禁用清除选项在生产中引发错误

Nuxt 项目中的 Tailwind CSS 尝试使用 SCSS 变量会引发“未知单词”错误

首次访问 Nuxt 2.15.3、Tailwind 和 Pwa 模块时不加载 Safari 本地字体