0

I'm trying to set up Cypress component tests for a Nuxt app. It works, but almost none of my styles are working, because they depend on Tailwind together with my custom tailwind.config.js.

This is my 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;
};

How can I include Tailwind with a custom config? And while we're at it: how do I include an extra global .scss files in all my component tests?

Johannes Stricker
  • 1,701
  • 13
  • 23

1 Answers1

1

You can get your styles to work by importing them directly into your test files, like so:

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

I'm looking into a method to add these styles globally as well, so if I find something I'll make sure to post it here.

Updated answer

Add the following to your build settings in your nuxt.config.js file.

// nuxt.config.js

import { join } from 'path'

...

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

If you have jit mode enabled for tailwindcss, make sure to add the appropriate purge paths to your tailwind config. With me it was loading in an infinite loop, after specifying these paths more specific it was sorted out. Also see tailwind docs.

// tailwind.config.js

purge: [
  './components/**/*.vue', 
  './layouts/**/*.vue', 
  './pages/**/*.vue'
],
Sjoerd
  • 54
  • 10
  • Thanks. However, this requires me to precompile the tailwind stylesheet, doesn't it? Otherwise, how would it pick up my custom config? Shouldn't there be a way to configure this in the test setup webpack config? – Johannes Stricker Nov 01 '21 at 13:12
  • That is probably true indeed. For my case this worked as I needed to test some of the default 'visibility' features of tailwind in order to see if an element was visible or not on certain devices. I also think there should be a way to use the webpack config, but I haven't found it yet. – Sjoerd Nov 01 '21 at 13:51
  • Today finally got some time to figure this out. In my project I had to add tailwindcss to the postcss plugins inside the nuxt.config.js file. I'll update my anwer. – Sjoerd Nov 09 '21 at 12:53
  • Great, this works. If you don't want to import the stylesheets in every single component test, you can import them once in your component test support file. I've created a separate support file only for component tests at `cypress/componentTests/support/index.js` and configured it under the `"component"` option in `cypress.json`. I'm still struggling to integrate https://github.com/nuxt-community/fontawesome-module though. Any ideas? – Johannes Stricker Nov 10 '21 at 07:26
  • I've actually gotten the nuxt-community/fontawesome-module to work as well, at least with a workaround. Under the hood it uses https://github.com/FortAwesome/vue-fontawesome, so I'm importing that in `cypress/componentTests/support/index.js` as well and using it as described here: https://github.com/FortAwesome/vue-fontawesome#integrating-with-other-tools-and-frameworks. It doesn't automatically pull the module config from the `nuxt.config.js` file, but at least the fontawesome icons show up in the component tests now. – Johannes Stricker Nov 11 '21 at 08:07