Angular 13 update

[Angular2Guy]

I am having trouble updating a project to Angular 13 due to peer dependencies of the shallow-renderer. Can shallow-renderer support Angular 13?

[duck-nukem]

FYI @getsaf I've spent some time on this, and the upgrade doesn't seem trivial. After updating to 13.x dependencies, there are a few errors like:

03 12 2021 10:48:48.501:WARN [reporter]: SourceMap position not found for trace: An error was thrown in afterAll
Uncaught TypeError: testing_2.getTestBed is not a function
TypeError: testing_2.getTestBed is not a function
    at Object.global.wrappers./home/device/dev/shallow-render/karma-test-shim.ts.core-js/es6 (http://localhost:9876/base/karma-test-shim.js?828e6948ef1be917998bf50276f27c3a4a020e58:2:773)
    at require (http://localhost:9876/base/node_modules/karma-typescript/dist/client/commonjs.js?f5014f1e344ba3e2f0d92afe67b92f3001c46c90:17:25)
    at http://localhost:9876/base/node_modules/karma-typescript/dist/client/commonjs.js?f5014f1e344ba3e2f0d92afe67b92f3001c46c90:38:9
    at Array.forEach (<anonymous>)
    at http://localhost:9876/base/node_modules/karma-typescript/dist/client/commonjs.js?f5014f1e344ba3e2f0d92afe67b92f3001c46c90:37:40
    at http://localhost:9876/base/node_modules/karma-typescript/dist/client/commonjs.js?f5014f1e344ba3e2f0d92afe67b92f3001c46c90:40:3

Downgrading to 12.x works fine again. Not sure what the issue is - haven't been following Angular development lately, hopefully it's just another package update.

Also there are some vulnerable packages

3 vulnerabilities (1 moderate, 2 high)

Will install karma@6.3.9, which is a breaking change
node_modules/ua-parser-js
  karma  5.0.0 - 5.2.3
  Depends on vulnerable versions of ua-parser-js
  node_modules/karma

2 high severity vulnerabilities

which seems to require a major SemVer update to karma 6.3.9

Update Seems like there's a difference between how karma-test-shim.ts is compiled.

Current working excerpt:

const testing_2 = (cov_1dqahfoarg().s[7]++, require("@angular/core/testing"));
cov_1dqahfoarg().s[8]++;
testing_2.getTestBed().initTestEnvironment(testing_1.BrowserDynamicTestingModule, testing_1.platformBrowserDynamicTesting());

After 13.x upgrade:

const testing_2 = (cov_1dqahfoarg().s[7]++, require("@angular/core/testing"));
cov_1dqahfoarg().s[8]++;
(0, testing_2.getTestBed)().initTestEnvironment(testing_1.BrowserDynamicTestingModule, (0, testing_1.platformBrowserDynamicTesting)());

I have currently no idea why testing_2.getTestBed() becomes (0, testing_2.getTestBed)() (and the same goes for testing_1 which is for BrowserDynamicTestingModule and platformBrowserDynamicTesting).

[getsaf]

Dude, I had the exact same experience. It seems to stem from Angular switching to ES Modules. If you inspect the imports from Angular modules, they are imported as the string-contents of the JS file in the node_modules folder.

import * as core from '@angular/core';
console.log(typeof core); // Displays "string"

This happens for every Angular module but I couldn't figure out why this happens. I'm traveling for work this week and won't have much time to devote to this. If you find anything in the meantime, let's use this thread to chat about it. Thanks for looking into it @kreatemore.

[duck-nukem]

Unfortunately no significant progress on my end. I followed some of the recommendations found across the internet, and changed the tscompiler's settings in the karma config file (and also tsconfig.json) to use "module": "es2020" and also added moduleResolution: 'node', to karma.conf.ts. Got a different error message about imports, and that's as far as I got :/

 SyntaxError: Unexpected token '{'. import call expects exactly one argument.

If I understand this right, it's because these types of module imports aren't understood by browsers. Unfortunately I know close to nothing about the configuration setups/compilation options, so I'm mostly guessing at this point. I saw jest/ts-jest has already tackled this issue - not sure if moving away from Karma is an option at this point

[getsaf]

Wanted to give an update. I'm part of the way through this update. There were a few changes in Angular 13 resolvers that needs some tweaking. Hope to be done this weekend!

Note: I was using a hand-rolled karma build and have switched to a proper angular-cli library which is probably something I should have done a while ago.

[getsaf]

I had some free time over the holiday 🎄 break to push the Angular 13 beta..

When someone has a chance to give it a go. There were lots of changes so please report any regressions if you find any.

npm i -D shallow-render@13

[ghost]

Hello, thanks for the great work ! There seem to be an issue with the new update, I can't run the tests. Hereby the error message I get from jest :

● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/jbh/Documents/topo-art/node_modules/shallow-render/dist/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { Shallow } from './lib/shallow';
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

    > 1 | import { Shallow } from 'shallow-render';

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)

I use jest-preset-angular, which is supposed to work for Angular 13 (https://thymikee.github.io/jest-preset-angular/docs/guides/angular-13+/)

Am I missing something?

[ghost]

I found a temporary workaround, for those using jest-preset-angular.Your jest.config.js should look like this:

module.exports = {
  preset: "jest-preset-angular",
  transformIgnorePatterns: ["node_modules/(?!(shallow-render/|.*\\.mjs$))"],
  //Any other config...
};

[Angular2Guy]

I was able to migrate a medium sized library with shallow-render test to Angular 13. I have not seen regressions. Thank you for your work. I needed to use the workaround from sp0wn916. It would be nice if it could be added to the documentation.

[getsaf]

Thanks for testing things out. I originally used ES Modules in the v13 build to align with the Angular direction. However, there is no tangible benefit that I see to using ES modules, so I switched back to commonjs modules to better support Jest.

Try shallow-render v13.0.1 and you should be able to remove the transformIgnorePatterns hack.

This update was pretty tricky so sorry for the delays. I really appreciate your help in confirming the build. You guys rock!!

[aleix10kst]

@getsaf this might not be the place, but the error @sp0wn916 mentions has started happening to me after migrating to Angular 14. (Nx monorepo with Angular v14.2.3 + shallow-render v14.1.0). Has someone reported this? I can open a new issue and provide a repo for reproduction if needed.