angularjestjsjest-preset-angular

Angular 13 + jest + Angular library not working


I'm trying to use jest in an Angular 13 project for testing. I use jest-preset-angular with @angular-builders/jest.

I use ngx-pipes, which is a library that is not compiled for Angular 13. It works fine during normal Angular build. But in the jest test run it causes the error:

Error: Unexpected value 'NgStringPipesModule2' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

Minimal reproduction: https://github.com/dhcode/jest-preset-angular-13-issue

In my actual project I have the same error also with other Angular libraries. I ran ng serve before, so the ngcc compilation was done before running the tests.

How can I make my tests run and recognize the external libraries, that have been built with an older Angular version?


Solution

  • From the looks of it, ngx-pipes does not yet publish an Ivy distribution and your project still needs ngcc before running the tests.

    // package.json
    {
      "scripts": {
        "test": "ngcc && ng test"
      }
    }
    
    > jest-tests@0.0.0 test
    > ngcc && ng test
    
    Processing legacy "View Engine" libraries:
    - ngx-pipes [fesm2015/esm2015] (https://github.com/danrevah/ngx-pipes.git)
    - ngx-pipes [esm2015/esm2015] (https://github.com/danrevah/ngx-pipes.git)
    - ngx-pipes [main/umd] (https://github.com/danrevah/ngx-pipes.git)
    Encourage the library authors to publish an Ivy distribution.
     PASS  src/app/app.component.spec.ts
      AppComponent
        ✓ should create the app (163 ms)
        ✓ should have as title 'jest-tests' (46 ms)
        ✓ should render title (44 ms)
        ✓ should render shortened text (33 ms)
    
    -------------------|---------|----------|---------|---------|-------------------
    File               | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
    -------------------|---------|----------|---------|---------|-------------------
    All files          |     100 |      100 |     100 |     100 |                   
     ...component.html |     100 |      100 |     100 |     100 |                   
     app.component.ts  |     100 |      100 |     100 |     100 |                   
    -------------------|---------|----------|---------|---------|-------------------
    Test Suites: 1 passed, 1 total
    Tests:       4 passed, 4 total
    Snapshots:   0 total
    Time:        3.526 s, estimated 5 s
    Ran all test suites.