赛普拉斯组件测试未加载 CSS 而运行测试用例

Question

我们正在使用模板构建网络组件。我们编译模板组件并创建相应的“React 组件”并将它们导入到我们的项目中。

这样做时，我们能够在启动 React 应用程序时按预期查看组件。然而，当我们使用 cypress 安装组件并执行测试用例时，我们观察到这些预构建组件的 CSS 没有被加载。

cypress.json

    {
        "baseUrl": "http://localhost:3000",
        "projectId": "263jf8",
        "component": {
            "componentFolder": "src",
            "testFiles": "**/*spec.{js,jsx,ts,tsx}",
            "viewportHight": 1200,
            "viewportWidth": 1000
        },
        "retries": {
            "runMode": 2,
            "openMode": 0
        }
    }

示例规范文件

import Header from './header'; 
describe('header', () => {
    beforeEach(() => {
        mount(
            <Header></Header>
        )})
        it('renders as an inline button', () => {
             cy.get('button')
             .should('have.class', 'nexus-btn').and('be.visible')
             cy.get('.nexus-hamburger-icon').should('have.text','Close Menu').and('be.visible')
             cy.get('.nexus-menu > .nexus-btn').should('have.text','Close Menu')
             cy.get('a > .nexus-visually-hidden').contains('Home')
             cy.contains('Home').should('exist')
             cy.get('a > .nexus-icon > svg').should('be.visible')
            })
        })

plugin/cypress.index.js

module.exports = (on, config) => {
  require('cypress-grep/src/plugin')(config)

  if (config.testingType === 'component') {
    require('@cypress/react/plugins/react-scripts')(on, config)
  }
  return config

}

预计

实际

Answer 1

您可以尝试在 index.ts 或 index.js 文件中导入 css，该文件将在该位置可用 -> cypress/support/index.ts

赛普拉斯组件测试未加载 CSS 而运行测试用例

Cypress component testing is not loading CSS while running testcases

testing

automation

components

cypress

赛普拉斯组件测试未加载 CSS 而 运行 测试用例

Cypress component testing is not loading CSS while running testcases

testing

automation

components

cypress

赛普拉斯组件测试未加载 CSS 而运行测试用例