Not able to use with Cypress 7

[bondar-artem]

Current behavior

I was following the README to setup Angular component test with Cypress 7 but having an issue with cypress/plugins/index.js after pasting the suggested configuration in there

Error: SyntaxError: Cannot use import statement outside a module\n

Test code to reproduce

Link to the repo to reproduce: https://github.com/Postavshik/ngx-cypress-test/tree/componentTest

[LeJeanbono]

Hi @Postavshik ! I think you miss to copy in plugins folder the webpack config : https://github.com/bahmutov/cypress-angular-unit-test/blob/master/cypress/plugins/webpack.config.ts

[LeJeanbono]

Documentation is maybe not enough clear, will improve that.

[shivani2510]

same with me. cypress launches but getting following errors Module not found: Error: Can't resolve './app.component' in 'D:\projects\cy-new\src\app' resolve './app.component' in 'D:\projects\cy-new\src\app' using description file: D:\projects\cy-new\package.json (relative path: ./src/app) Field 'browser' doesn't contain a valid alias configuration using description file: D:\projects\cy-new\package.json (relative path: ./src/app/app.component) no extension Field 'browser' doesn't contain a valid alias configuration D:\projects\cy-new\src\app\app.component doesn't exist .js Field 'browser' doesn't contain a valid alias configuration D:\projects\cy-new\src\app\app.component.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration D:\projects\cy-new\src\app\app.component.json doesn't exist .wasm Field 'browser' doesn't contain a valid alias configuration D:\projects\cy-new\src\app\app.component.wasm doesn't exist as directory D:\projects\cy-new\src\app\app.component doesn't exist

[bondar-artem]

@LeJeanbono I didn't miss it. I tried to put this file in the root of the project and into the plugins folder - same result. I have updated the repo, with webpack placed in the plugins folder, you can check it out and debug. Maybe you ll find something else. Thank you!

[dgrbrady]

I don't know if this is an Angular 12 specific thing, or if I should create a separate issue for this but I found that when using the latest version of cypress-angular-unit-test with cypress 7.4.0 and Angular 12, I was getting this error when running component unit tests:

TypeError: Cannot set property getRequest of #<Object> which has only a getter

What I found was that in the cypress/plugins/index.ts file, I had to change import * as webpackConfig from './webpack.config'; to const webpackConfig = require('./webpack.config');

Possibly unrelated to your issue, but I suggest making the change regardless so you don't run into the issue later!

[LeJeanbono]

I don't know if this is an Angular 12 specific thing, or if I should create a separate issue for this but I found that when using the latest version of cypress-angular-unit-test with cypress 7.4.0 and Angular 12, I was getting this error when running component unit tests:

TypeError: Cannot set property getRequest of #<Object> which has only a getter

What I found was that in the cypress/plugins/index.ts file, I had to change import * as webpackConfig from './webpack.config'; to const webpackConfig = require('./webpack.config');

Possibly unrelated to your issue, but I suggest making the change regardless so you don't run into the issue later!

Nice catch, I missed to update the doc, thanks @dgrbrady !

[bondar-artem]

@LeJeanbono I have noticed that you have updated documentation, tried to follow that but still was not able to make it up and running. Now I see a new error: "Cannot read property 'tap' of undefined" coming from "html-webpack-plugin"

Could you take a look? Here is the code to pull: https://github.com/Postavshik/ngx-cypress-test/tree/componentTest

[LeJeanbono]

Your html-webpack-plugin version is > 5 which is for webpack 5. You're using Angular 8 (with webpack 4), you should downgrade html-webpack-plugin (work well with 4.5.2 in your project)

[bondar-artem]

@LeJeanbono It's been a while since I was looking into it. Thank you for your response. He html-webpack-plugin of version 4.5.2 helped and now I can open runner for component testing. But I suck on the next error when was trying to create a first test for datepicker component

I have pushed changes to the same banch, "componentTest" Cound you take a look please?