Cypress component testing is not loading CSS while running testcases

Question

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

Actual

Answer 1

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