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

Question

我正在尝试为 Nuxt 应用程序设置 Cypress 组件测试。 它有效，但我的样式几乎都无效，因为它们依赖 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文件？

Answer 1

您可以通过将样式直接导入到测试文件中来使样式生效，如下所示：

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

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