search

nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.45k stars 2.33k forks source link

Importing library into cypress test files, breaks test #17498

Closed Bogs-123 closed 1 year ago

Bogs-123 commented 1 year ago

Current Behavior

Importing a library into a cypress test file breaks the app.

Expected Behavior

Cypress e2e tests can import from libraries.

GitHub Repo

Failing Cypress Test

Steps to Reproduce

  1. Create a new Angular workspace.
  2. Generate a new library. Export a variable from said library.
  3. Import the exported variable in an e2e test file.
  4. Run the e2e test. Test fails.

Small reproduction: testing-fails.zip

npm install
nx e2e my-app-e2e

Notice the import in app.cy.ts from @org/core. Remove that import makes test runnable.

Nx Report

Node   : 18.10.0
   OS     : win32 x64
   npm    : 8.19.2
   Hasher : Native

   nx (global)        : 16.2.2
   nx                 : 16.3.2
   @nx/js             : 16.3.2
   @nx/jest           : 16.3.2
   @nx/linter         : 16.3.2
   @nx/workspace      : 16.3.2
   @nx/angular        : 16.3.2
   @nx/cypress        : 16.3.2
   @nx/devkit         : 16.3.2
   @nx/eslint-plugin  : 16.3.2
   @nrwl/tao          : 16.3.2
   @nx/web            : 16.3.2
   @nx/webpack        : 16.3.2
   typescript         : 5.0.4

Failure Logs

Error: Webpack Compilation Error
E:/test-apps/org/node_modules/@angular/core/fesm2022/core.mjs 1890:24
Module parse failed: Unexpected token (1890:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| function initFeatures(definition) {
>     definition.features?.forEach((fn) => fn(definition));
| }
| function extractDefListOrFactory(dependencies, pipeDef) {
 @ E:/test-apps/org/libs/core/src/lib/core.module.ts 2:0-41 7:4-12
 @ E:/test-apps/org/libs/core/src/index.ts
 @ ./src/e2e/app.cy.ts
    at Watching.handle [as handler] (C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-preprocessor\dist\index.js:212:23)
    at C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\webpack\lib\Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at Watching._done (C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\webpack\lib\Watching.js:98:28)
    at C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\webpack\lib\Watching.js:73:19
    at Compiler.emitRecords (C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:499:39)
    at C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\webpack\lib\Watching.js:54:20
    at C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:482:27
    at C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\neo-async\async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:464:33
    at C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:143:16
    at C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:143:16
    at C:\Users\USER\AppData\Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:197:23)

Operating System

Additional Information

No response

barbados-clemens commented 1 year ago

@Bogs-123 this looks like you're importing angular modules within the Cypress e2e suit which is will not understand as that runs in a node js context not the browser.

Can you add the reproducible to a git repo instead of a zip file?

Also what kind of library are you generating, I assume it's an angular library since you're getting an error about unable to compile angular mjs files.

Bogs-123 commented 1 year ago

@barbados-clemens

Added a repo

The imported library is a standard library created with the NX extension in Visual Studio Code.

barbados-clemens commented 1 year ago

@Bogs-123 Looks like you created an angular library from the @nx/angular plugin. You're running into this issue because you're main index.ts exports an angular module along with your variable. When importing from the index.ts file all things within that file are evaluated which means the angular module is trying to be loaded within nodejs environment for cypress, hence the error you're seeing.

I'd recommend making a library with @nx/js to house your runtime agnostic code like the variables you showed then you can import that @nx/js library inside the e2e project and the angular project.

Alternatively you can make a secondary entry point within the tsconfig.base.json that exports another file that only contains the non angular code, But importing FE code like angular inside cypress e2e isn't something supported.

personally I would make a new library.

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.