Cypress 组件测试、ReactJS 和 TailwindCSS

Posted 2023-03-07

【中文标题】Cypress 组件测试、ReactJS 和 TailwindCSS

【英文标题】：Cypress Component Testing, ReactJS, and TailwindCSS

【发布时间】：2021-10-17 22:14:36

【问题描述】：

有谁知道如何从测试文件中加载 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。

【参考方案1】：

赛普拉斯文档有一个错字，你应该导入这个

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

不是这个

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

---

或者可以使用cypress/plugins/index.js中的cracao插件

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

激活craco.config.js的内容（你已经有）

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

【讨论】：

谢谢！两种方法都有效。唯一的事情是，在第一个选项中，我的自定义 css 没有任何区别，但是当我在 cypress 插件上设置 Craco 时正在加载

【参考方案2】：

您可以像cypress 7.0 migration guide 中提到的那样直接导入tailwind CSS。另外，不推荐mountingOptions.stylesheets。

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

整个sn-p：

// 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 />)
)