Cypress 组件测试、ReactJS 和 TailwindCSS

Question

有谁知道如何从测试文件加载 TailwindCSS？

我尝试使用与 VueJS 相同的方法，导入 css 文件，但它只是不加载样式。

这是我添加 cypress 组件测试的提交： https://github.com/vicainelli/cypress-component-testing-react-tailwindcss/commit/2fa25833cb965fadfeda6c53b80a23bb12b3b1c5

我知道在 mount 中有一些选项可以传递样式表，例如

像这样：

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

但我想使用我的自定义CSS。

Answer 1

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
});