Cypress component testing fails because of tailwind [closed]

Question

I am trying to do some component testing with Cypress and I can't get it to work, I am always getting an error.

I think this is happening because Tailwind is not set up correctly. I tried following multiple guides online including the one from cypress themselves but I can't get it to work.

My test:

import React from 'react';
import MyComponent from "./page";

describe('render', () => {
    it('renders', () => {
        cy.mount(<MyComponent/>)
    })
})

Component:

export default function MyComponent() {
  return (
     <div className="relative isolate">
        <div className="mx-auto grid max-w-7xl grid-cols-1">
           Hello
        </div>
     </div>
   )
}

cypress.config.js:

const { defineConfig } = require('cypress');

module.exports = defineConfig({
    component: {
        supportFile: 'cypress/support/component.js',
        devServer: {
            framework: 'next',
            bundler: 'webpack',
        },
    },
})

cypress/support/component.js:

import "tailwindcss/tailwind.css";

I also tried compiling css using tailwindcss -i src/app/globals.css -o src/index.css and including index.css but that didn't change anything either.

I tried testing a component that does not use tailwind in any way and it works so the issue is definitely with tailwind.

What am I missing?

The app is set up using Next if that matters.

Answer 1

The cause may be that Tailwind code needs to be compiled, but component testing does not have the compilation steps of a full app.

Looking at cypress-component-testing-apps repo (the react-cra4-js example) they have a script in package.json to pre-compile the CSS.

"scripts": {
  ...
  "compile:css": "tailwindcss -i src/tailwind.css -o src/index.css",

Then the compiled index.css is imported in cypress/support/component.js

// Import commands.js using ES2015 syntax:
import './commands'

// Ensure global app styles are loaded:
import '../../src/index.css';                <-- after running compile:css script

import { mount } from 'cypress/react'

Cypress.Commands.add('mount', mount)

This seems to be a fairly simple way of by-passing the Tailwind compilation step inside the test.

---

Your component and test

I added Tailwind bg color and text color for more obvious effect,

export default function MyComponent() {
  return (
     <div className="relative isolate">
        <h1 className="mx-auto grid max-w-7xl grid-cols-1 bg-cy-blue text-white">
           Hello
        </h1>
     </div>
   )
}

import React from 'react'
import MyComponent from './my-component'

describe('render', () => {
  it('renders', () => {
    cy.mount(<MyComponent />)
    cy.get('h1')
      .should('have.text', 'Hello')
      .and('have.css', 'background-color', 'rgb(73, 86, 227)')  // a slightly saturated medium violet
  })
})

This is the imported CSS (into /cypress/support/component.ts)

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@tailwind base;
@tailwind components;
@tailwind utilities;