I do my first component testing with Cypress within an Angular environment and I have problems to render styles and scripts from nodes_modules and assets folder when testing. I would require helps to make it works successfully.
The guide https://docs.cypress.io/guides/component-testing/angular/overview says I can use the options API to provide my own project specific configuration to the devServer. The devServer configuration receives an options property. So in my understanding, I should use the options API. Start from there, here is my config :
component: {
devServer: {
framework: 'angular',
bundler: 'webpack',
options: {
projectConfig: {
root: '',
sourceRoot: 'src',
buildOptions: {
outputPath: "dist",
index: "index.html",
main: "main.ts",
polyfills: "src/polyfills.ts",
tsConfig: "tsconfig.app.json",
inlineStyleLanguage: 'scss',
assets: [
"src/favicon.ico",
"src/assets",
],
styles: [
"node_modules/@angular/material/_theming.scss",
"node_modules/.../scss/material-theme/3-generic/_base.scss",
"node_modules/.../scss/material-theme/3-generic/_fonts.scss",
"node_modules/.../scss/material-theme/main.scss",
"src/styles.scss"
],
scripts: [],
buildOptimizer: false,
optimization: false,
vendorChunk: true,
extractLicenses: false,
sourceMap: true,
namedChunks: true,
},
},
},
},
specPattern: '**/*.cy.ts',
},
Then, I did create component.index.html with basic template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
<base href="/" />
</head>
<body>
<div data-cy-root></div>
</body>
</html>
Then, I did add in component.ts
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Cypress {
interface Chainable {
mount: typeof mount;
}
}
}
Cypress.Commands.add(
'mount',
(component: Type<unknown> | string, config: MountConfig<T>) => {
return mount(component, {
...config,
autoSpyOutputs: true,
})
}
)
But, when tests are executing, labels and images don't show and give this sort of error
(uncaught exception)HttpErrorResponse: Http failure response for http://localhost:8080/assets/i18n/fr.json: 404 Not Found. (uncaught exception)HttpErrorResponse: Http failure response for http://localhost:8080/assets/img/sun.jpg: 404 Not Found
If you know how to help, help me thanks
Samantha [1]: https://docs.cypress.io/guides/component-testing/angular/overview