bahmutov / bahmutov/cypress-angular-unit-test

Component Tests Not Working For Nx Lib

Open
#758 2 comments 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

I have an Nx monorepo with 1 Angular app and 1 Angular lib (not buildable/publishable). I have successfully managed to implement `cypress-angular-unit-test` for the app, but when trying to implement in my lib, I get the following error when running a component unit test

```
Error: The following error originated from your test code, not from Cypress.

> The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.

Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
at getCompilerFacade (http://localhost:8080/__cypress/src/vendors-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2020_core_mjs.js:7029:15)
at Module.ɵɵngDeclareFactory (http://localhost:8080/__cypress/src/vendors-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2020_core_mjs.js:31535:22)
at Module../node_modules/@angular/common/fesm2020/common.mjs (http://localhost:8080/__cypress/src/vendors-node_modules_rxjs_dist_esm5_internal_operators_take_js-node_modules_rxjs_dist_esm5_in-45b09b.js:252:89)
at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:4189:42)
at Module../node_modules/@angular/forms/fesm2020/forms.mjs (http://localhost:8080/__cypress/src/vendors-node_modules_rxjs_dist_esm5_internal_BehaviorSubject_js-node_modules_angular_forms_fe-c92fb1.js:230:73)
at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:4189:42)
at Module../libs/test/src/lib/browser/browser.component.ts (http://localhost:8080/__cypress/src/libs_test_src_lib_types_index_ts.js:238:72)
at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:4189:42)
at Module../libs/test/src/lib/taskbar/taskbar.component.ts (http://localhost:8080/__cypress/src/libs_test_src_lib_types_index_ts.js:558:84)
at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:4189:42)
From previous event:
at Object.runScripts (http://localhost:8080/__cypress/runner/cypress_runner.js:197880:62)
at $Cypress.onSpecWindow (http://localhost:8080/__cypress/runner/cypress_runner.js:186565:76)
at init (http://localhost:8080/__cypress/src/main.js:85:13)
at Object../node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js (http://localhost:8080/__cypress/src/main.js:64:3)
at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:4189:42)
at render (http://localhost:8080/__cypress/src/main.js:4667:5)
at http://localhost:8080/__cypress/src/main.js:4669:1
at http://localhost:8080/__cypress/src/main.js:4671:3
at http://localhost:8080/__cypress/src/main.js:4673:12
```

### Desired behavior

Cypress Component testing should work inside an Nx library using the same setup that works for Nx application.

### Test code to reproduce

I'm not exactly sure if this is a *bug* with the library because of the following:
1. It works for the app, just not the lib
2. I can get it working in the lib if I create a dummy inline component in my `spec.ts` file.

Component test in my lib:
```typescript
// this component is inside my ui lib
// BROKEN test which produces error
describe('TaskbarComponent', () => {
it('should create', () => {
initEnv(TaskbarComponent, {
declarations: [
// MockComponent and MockService come from library ng-mocks and works fine for unit tests in app
MockComponent(MenuComponent),
MockComponent(WindowComponent),
],
providers: [MockService(WindowService)],
});
const fixture = mount(TaskbarComponent);
expect(fixture).to.exist;
});
});
```
But if I do this instead,
```typescript
// same test file, but DOES NOT produce error
@Component({
template: '

Test
',
selector: 'dgrbrady-test',
})
export class TestComponent {}

describe('TaskbarComponent', () => {
it('should create', () => {
initEnv(TestComponent);
const fixture = mount(TestComponent);
expect(fixture).to.exist;
});
});
```

It works fine? I'm at a loss here. There's not a whole lot of documentation out there for getting Cypress component testing working in an Nx workspace. Anyone else ever get this library working in an Nx workspace? Any guidance is super appreciated!

Also, here's the code for the WORKING unit tests in my Nx app
```typescript
describe('AppComponent', () => {
it('should mount', () => {
initEnv(AppComponent, { declarations: [MockComponent(TaskbarComponent)] });
const fixture = mount(AppComponent);
expect(fixture).to.exist;
});

it('should contain TaskbarComponent', () => {
initEnv(AppComponent, { declarations: [MockComponent(TaskbarComponent)] });
mount(AppComponent);
cy.get('dgrbrady-taskbar');
});
});
```

This is for my portfolio site, you can find the repo [here](https://github.com/dgrbrady/portfolio). I'm using the command `npx cypress open-ct -C libs\ui\cypress.json` to run the Cypress runner for the ui lib, and `npx cypress open-ct -C apps\desktop\cypress.json` to run the Cypress runner for the app.

### Versions

Output from `npm ls`:
```
+-- __ngcc_entry_points__.json@ extraneous
+-- @angular-devkit/build-angular@13.1.4
+-- @angular-eslint/eslint-plugin-template@13.0.1
+-- @angular-eslint/eslint-plugin@13.0.1
+-- @angular-eslint/template-parser@13.0.1
+-- @angular/animations@13.1.3
+-- @angular/cdk@13.1.3
+-- @angular/cli@13.1.4
+-- @angular/common@13.1.3
+-- @angular/compiler-cli@13.1.3
+-- @angular/compiler@13.1.3
+-- @angular/core@13.1.3
+-- @angular/forms@13.1.3
+-- @angular/language-service@13.1.3
+-- @angular/platform-browser-dynamic@13.1.3
+-- @angular/platform-browser@13.1.3
+-- @angular/router@13.1.3
+-- @compodoc/compodoc@1.1.18
+-- @cypress/webpack-dev-server@1.8.1
+-- @ngneat/until-destroy@8.0.4
+-- @nrwl/angular@13.5.3
+-- @nrwl/cli@13.5.3
+-- @nrwl/cypress@13.5.3
+-- @nrwl/eslint-plugin-nx@13.5.3
+-- @nrwl/jest@13.5.3
+-- @nrwl/linter@13.5.3
+-- @nrwl/tao@13.5.3
+-- @nrwl/workspace@13.5.3
+-- @twittwer/compodoc@1.6.6
+-- @types/jest@27.0.2
+-- @types/node@14.14.33
+-- @typescript-eslint/eslint-plugin@5.3.1
+-- @typescript-eslint/parser@5.3.1
+-- angular2-template-loader@0.6.2
+-- cypress-angular-unit-test@3.9.0
+-- cypress@9.4.1
+-- dotenv@10.0.0
+-- eslint_d@11.1.1
+-- eslint-config-prettier@8.1.0
+-- eslint-plugin-cypress@2.12.1
+-- eslint-plugin-jest@26.0.0
+-- eslint-plugin-prettier@4.0.0
+-- eslint-plugin-sort-imports-es6-autofix@0.6.0
+-- eslint@8.2.0
+-- html-webpack-plugin@5.5.0
+-- jest-preset-angular@11.0.0
+-- jest@27.2.3
+-- ng-mocks@13.0.3
+-- prettier@2.5.1
+-- raw-loader@1.0.0
+-- rxjs@7.4.0
+-- ts-jest@27.0.5
+-- ts-node@9.1.1
+-- tslib@2.3.1
+-- typescript@4.5.5
`-- zone.js@0.11.4
```

`package.json`
```json
{
"name": "dgrbrady",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "nx",
"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",
"nx": "nx",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "nx workspace-lint && ng lint",
"e2e": "ng e2e",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
"affected:build": "nx affected:build",
"affected:e2e": "nx affected:e2e",
"affected:test": "nx affected:test",
"affected:lint": "nx affected:lint",
"affected:dep-graph": "nx affected:dep-graph",
"affected": "nx affected",
"format": "nx format:write",
"format:write": "nx format:write",
"format:check": "nx format:check",
"update": "nx migrate latest",
"workspace-generator": "nx workspace-generator",
"dep-graph": "nx dep-graph",
"help": "nx help"
},
"private": true,
"dependencies": {
"@angular/animations": "13.1.3",
"@angular/cdk": "13.1.3",
"@angular/common": "13.1.3",
"@angular/compiler": "13.1.3",
"@angular/core": "13.1.3",
"@angular/forms": "13.1.3",
"@angular/platform-browser": "13.1.3",
"@angular/platform-browser-dynamic": "13.1.3",
"@angular/router": "13.1.3",
"@ngneat/until-destroy": "^8.0.4",
"@nrwl/angular": "13.5.3",
"@twittwer/compodoc": "^1.6.6",
"rxjs": "7.4.0",
"tslib": "^2.0.0",
"zone.js": "0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "13.1.4",
"@angular-eslint/eslint-plugin": "13.0.1",
"@angular-eslint/eslint-plugin-template": "13.0.1",
"@angular-eslint/template-parser": "13.0.1",
"@angular/cli": "13.1.4",
"@angular/compiler-cli": "13.1.3",
"@angular/language-service": "13.1.3",
"@compodoc/compodoc": "^1.1.15",
"@cypress/webpack-dev-server": "^1.8.1",
"@nrwl/cli": "13.5.3",
"@nrwl/cypress": "13.5.3",
"@nrwl/eslint-plugin-nx": "13.5.3",
"@nrwl/jest": "13.5.3",
"@nrwl/linter": "13.5.3",
"@nrwl/tao": "13.5.3",
"@nrwl/workspace": "13.5.3",
"@types/jest": "27.0.2",
"@types/node": "14.14.33",
"@typescript-eslint/eslint-plugin": "5.3.1",
"@typescript-eslint/parser": "5.3.1",
"angular2-template-loader": "^0.6.2",
"cypress": "^9.4.1",
"cypress-angular-unit-test": "^3.9.0",
"dotenv": "10.0.0",
"eslint": "8.2.0",
"eslint_d": "^11.1.1",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-jest": "^26.0.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
"html-webpack-plugin": "^5.5.0",
"jest": "27.2.3",
"jest-preset-angular": "11.0.0",
"ng-mocks": "^13.0.3",
"prettier": "2.5.1",
"raw-loader": "^1.0.0",
"ts-jest": "27.0.5",
"ts-node": "~9.1.1",
"typescript": "4.5.5"
}
}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the library and app Cypress configurations at libs\ui\cypress.json and apps\desktop\cypress.json, then run the two listed cypress open-ct commands and compare their component-test setup. Reproduce the TaskbarComponent test and investigate the PlatformLocation/JIT error; done means the library component mounts without the error while the working app tests remain functional.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.