CODEWITHSUNDEEP
testingautomationcomponentscypress
Varad
Varad

Reputation: 1022

Cypress component testing is not loading CSS while running testcases

We are building web components using stencil. We compile the stencil components and create respective "React component" and import them into our projects.

While doing so we are able to view the component as expected when we launch the react app. However when we mount the component and execute test cases using cypress we observe that the CSS for these pre built components are not getting loaded.

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

sample spec file

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

}

Expected enter image description here

Actual enter image description here

Upvotes: 7

Views: 6560

Answers (1)

Sivanandhini Chandrasekaran
Sivanandhini Chandrasekaran

Reputation: 111

You can try importing the css in the index.ts or index.js file that will be available in the location cypress/support/index.ts

Upvotes: 6

Related Questions