Can't load MaterialUI styles

[glagius]

Hi man! I am learning to write tests for my components using cypress, and I ran into such a problem - when using third-party libraries, the webpack config does not pull up the library styles of the imported module.

describe('Basics', () => {
  it('Shows navigation panel', () => {
    initEnv(AppComponent, {
      imports: [
        AppRoutingModule,
        MatTabsModule,
        HomeModule,
        LoginModule,
        BookModule,
        FavouritesModule,
        OptionsModule,
        AccountModule,
      ],
      providers: [AuthService, AuthGuard, { provide: APP_BASE_HREF, useValue: '/' }],
    });
    mount(AppComponent, {});
    cy.findByTestId(/navigation/).should('exist');
  });
});

Can you help meб how to configure the webpack config so that it loads the styles of third-party modules.

[glagius]

After checking the styles, I noticed that the webpack collected all the styles, but my component is displayed in a completely different way than in the standard browser tab.

[LeJeanbono]

Hi @BabayevEldar ! Can you find where is the style file that's not taken ? It is something imported in your angular.json ?

[glagius]

Hi @LeJeanbono By experience, I found out that it would be nice to modify the webpack config so that it can pull in global styles from angular.json. Or add an example of how this can be achieved in the test file itself.

[LeJeanbono]

Made some test here : https://github.com/bahmutov/cypress-angular-unit-test/blob/master/examples/ng9/src/app/material-button/material-button.component.cy-spec.ts Use setConfig({ cssFile: 'node_modules/@angular/material/prebuilt-themes/indigo-pink.css' }); to include your angular theme (or other external component css). And don't forget to call fixture.detectChanges(); to refresh component rendering. Let me know if it's ok for you @BabayevEldar

[glagius]

Unfortunately, recent changes did not even allow running a test that was previously running. The problem with styles, which appears only when building with a webpack, because ng serve / ng e2e work fine Here is my repo with mini-project on angular + cypress: https://github.com/BabayevEldar/BookReader

[LeJeanbono]

You need to do some modifications here :

1. Add angular-router-loader in your cy-ts-preprocessor

   {
       test: /\.ts$/,
       use: [
         {
           loader: 'ts-loader',
         },
         'angular-router-loader',
         'angular2-template-loader'
       ],
       exclude: [/node_modules/],
     }

   And test: /\.(css)$/, => test: /\.(scss)$/,

2. Add require('@testing-library/cypress/add-commands'); in your support/index.ts

3. In app.component.html replace data-test-id="navigation" by data-testid="navigation"

4. Uncomment modules in app.component.spec.ts

Keep me in touch !

[LeJeanbono]

BTW, Angular Material style seems ok :

[glagius]

Thanks a lot, dude! You made my day! I don't even know what I would do without your help!

[LeJeanbono]

Your welcome @BabayevEldar, thanks for your repo ! Don't hesitate to post feedback, improvement, etc