Cypress Component Testing, ReactJS, and TailwindCSS

Question

Does anyone know how can I load the TailwindCSS from the testing files?

I've tried to use the same approach I used on VueJS, importing the css file, but it does just not load the styles.

Here's the commit where I added the cypress component testing: https://github.com/vicainelli/cypress-component-testing-react-tailwindcss/commit/2fa25833cb965fadfeda6c53b80a23bb12b3b1c5

I know in mount there are options that I can pass the stylesheet, for example

Like this:

mount(<App />, { stylesheet: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" });

But I would like to use my custom css.

user16616693 · Accepted Answer · 2021-08-15 23:35:24Z

9

The Cypress docs have a typo, you should import this

import 'tailwindcss/dist/tailwind.min.css'

not this

import 'tailwindcss/dist/tailwindcss.min.css'   // causes error, not in node_modules

import React from 'react';
import { mount } from '@cypress/react';
import App from './App';
import './index.css';
import 'tailwindcss/dist/tailwind.min.css'

it('should renders the App correctly', () => {
  mount(<App />) 
  cy.get('h1').contains('Cypress Component Testing with Tailwind CSS')
    .should('have.css', 'font-family') 
    .and('match', /Georgia/)          // passes
});

Or can use the cracao plugin in cypress/plugins/index.js

yarn add -D @cypress/react
//or
npm install -D @cypress/react

const cracoConfig = require('../../craco.config.js')
const injectDevServer = require('@cypress/react/plugins/craco')

module.exports = (on, config) => {
  injectDevServer(on, config, cracoConfig)

  return config
}

which activates the contents of craco.config.js (you already have)

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

import React from 'react';
import { mount } from '@cypress/react';
import App from './App';
import './index.css';
// import 'tailwindcss/dist/tailwind.min.css'    // not required, plugin works

it('should renders the App correctly', () => {
  mount(<App />) 
  cy.get('h1').contains('Cypress Component Testing with Tailwind CSS')
    .should('have.css', 'font-family') 
    .and('match', /Georgia/)          // passes
});

answered Aug 15, 2021 at 23:35

user16616693

Sign up to request clarification or add additional context in comments.

1 Comment

Vinicius Cainelli Over a year ago

Thanks! Both methods worked. The only thing, on the first option my custom css does not make any difference but is loading when I set up Craco on cypress plugins

Alapan Das · Accepted Answer · 2021-08-15 16:00:21Z

0

You can directly import the tailwind CSS like this as mentioned in the cypress 7.0 migration guide. Also, mountingOptions.stylesheets are not recommended.

require('tailwindcss/dist/tailwindcss.min.css')

The entire snippet:

// In the majority of modern style-loaders,
// these styles will be injected into document.head when they're imported below
require('./index.scss')
require('tailwindcss/dist/tailwindcss.min.css')

const { mount } = require('@cypress/react')
const Button = require('./Button')

it('renders a Button', () => {
  // This button will render with the Tailwind CSS styles
  // as well as the application's index.scss styles
  mount(<Button />)
})

edited Aug 15, 2021 at 16:00

answered Aug 15, 2021 at 15:53

Alapan Das

18.3k5 gold badges38 silver badges66 bronze badges

Collectives™ on Stack Overflow

Cypress Component Testing, ReactJS, and TailwindCSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related