赛普拉斯组件测试因顺风而失败

Question

我正在尝试使用 Cypress 进行一些组件测试，但无法让它工作，我总是收到错误。

我认为发生这种情况是因为 Tailwind 设置不正确。我尝试遵循多个在线指南，包括 cypress 本身的指南，但我无法让它工作。

我的测试：

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

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

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

我错过了什么？

如果需要的话，可以使用“下一步”来设置应用程序。

Answer 1

原因可能是因为Tailwind代码需要编译，但组件测试没有完整应用程序的编译步骤。

查看 cypress-component-testing-apps repo （react-cra4-js 示例），他们在

package.json

中有一个脚本来预编译 CSS。

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

然后将编译好的

index.css

导入到

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)

这似乎是绕过测试中 Tailwind 编译步骤的相当简单的方法。