有谁知道如何从测试文件加载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。
Cypress 文档有一个拼写错误,你应该导入这个
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
});
您可以像cypress 7.0迁移指南中提到的那样直接导入tailwind CSS。另外,不推荐
mountingOptions.stylesheets
。
require('tailwindcss/dist/tailwindcss.min.css')
整个片段:
// 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 />)
})