Undefined 'Model' on test with Karma Angular

[mpuerto-paymefy]

Introduction

When I try to execute the tests with Karma in my Angular it says this:

It seems the library JointJs it has a problem with the undefined "Model"

I only have two tests:

I am working with:

Steps to reproduce

ng test

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

Could you create a simple reproducible case (a repo)?

[jamesgeorgewilliams]

After running npm i --force, the following output is observed in your repository for ng serve and ng test.

ng serve:

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /Users/jameswilliams/Desktop/model-error-lib-jointjs/src/main.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
8 │ @import '../../test-repo-fail-main/node_modules/primeflex/primeflex';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 8:9  root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
8 │ @import '../../test-repo-fail-main/node_modules/primeflex/primeflex';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 8:9  root stylesheet

Error: error TS6053: File '/Users/jameswilliams/Desktop/test-repo-fail-main/src/main.ngtypecheck.ts' not found.
  The file is in the program because:
    Root file specified for compilation


Error: error TS6053: File '/Users/jameswilliams/Desktop/test-repo-fail-main/src/main.ts' not found.
  The file is in the program because:
    Root file specified for compilation

ng test:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
8 │ @import '../../test-repo-fail-main/node_modules/primeflex/primeflex';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 8:9  root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
8 │ @import '../../test-repo-fail-main/node_modules/primeflex/primeflex';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 8:9  root stylesheet

Error: error TS6053: File '/Users/jameswilliams/Desktop/test-repo-fail-main/src/test.ts' not found.
  The file is in the program because:
    Root file specified for compilation



22 04 2024 13:55:05.652:INFO [Chrome 124.0.0.0 (Mac OS 10.15.7)]: Connected on socket fx8pB8b1icEulGnAAAAB with id 64731660
22 04 2024 13:55:05.826:WARN [web-server]: 404: /_karma_webpack_/main.js
Chrome 124.0.0.0 (Mac OS 10.15.7): Executed 0 of 0 SUCCESS (0.027 secs / 0 secs)
TOTAL: 0 SUCCESS

Can you please check the repository you provided, and update it with functioning code?

[mpuerto-paymefy]

Here is the error in more detail
I am gonna update the repo.

[mpuerto-paymefy]

@jamesgeorgewilliams Updated the code, thanks for the patience.

[jamesgeorgewilliams]

Hi, thanks for updating the repository.

If using a version of JointJS before version 4.0.0, it is necessary to include the dependencies that JointJS had in the past.

Updating to the following in the "test" property in angular.json will fix the issue.

"scripts": [
      "./node_modules/jquery/dist/jquery.min.js",
      "./node_modules/lodash/lodash.min.js",
      "./node_modules/backbone/backbone-min.js",
      "./node_modules/jointjs/dist/joint.min.js"
]

I strongly encourage you to update to the latest version of JointJS, @joint/core (4.0.2) . It is dependency free, and you won't run into this issue.
https://www.npmjs.com/package/@joint/core