bahmutov / bahmutov/cypress-angular-unit-test

Critical dependency: the request of a dependency is an expression

Open
#590 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
160
Forks
32
PR merge metrics
No merged PRs in 30d

Description

### Current behavior
After npx cypress open-ct I get a lot of warnings like this:
```
WARNING in ./node_modules/@angular/core/fesm2015/core.js 29858:15-102
Critical dependency: the request of a dependency is an expression
```

and this:
```
WARNING in ./node_modules/@angular/core/fesm2015/core.js 29858:15-102
System.import() is deprecated and will be removed soon. Use import() instead.
```

Be use Angular 12.1 with webpack 5.47 and typescript 4.3.
![Screenshot 2021-09-02 at 08 52 56](https://user-images.githubusercontent.com/10447984/131796724-a277f9bb-d12a-4b22-8587-17fd74d2746a.png)

After the built finished with warnings I get an "Root element not found" error in the Component Test.
![Screenshot 2021-09-02 at 08 55 31](https://user-images.githubusercontent.com/10447984/131796902-75cb3389-9e70-4cca-b1da-6d4e58e03e03.png)
s.

### Desired behavior

A build without warnings and working Component Test without error

### Test code to reproduce

` import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy';

import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/zone-testing';
import { initEnv, mount } from 'cypress-angular-unit-test';
import { LoadingIndicatorComponent } from './loading-indicator.component';

describe('LoadingIndicatorComponent', () => {
beforeEach(() => {
initEnv(LoadingIndicatorComponent);
});

it('shows the input', () => {
mount(LoadingIndicatorComponent, {});

cy.contains('Welcome to World!');
});
});`

### Versions
Cypress package version: 7.7.0
Cypress binary version: 7.7.0
Electron version: 12.0.0-beta.14
Bundled Node version: 14.15.1

@angular-devkit/architect 0.1201.1
@angular-devkit/build-angular 12.1.1
@angular-devkit/core 12.1.1
@angular-devkit/schematics 12.1.1
@angular/elements 12.1.3
@angular/flex-layout 12.0.0-beta.34
@schematics/angular 12.1.1
rxjs 6.6.7
typescript 4.3.5
webpack 5.47.0

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the Angular component test with `npx cypress open-ct` and the supplied `LoadingIndicatorComponent` test, then trace the component-test webpack bootstrap that emits the Angular dependency warnings. Done means the build no longer reports these warnings and the component test runs without the “Root element not found” error.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, cypress, typescript, webpack
Domain
frontend, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.