Jest tests using @angular-devkit/schematics are throwing errors for the encoded data was not valid for encoding utf-8

[cathey191]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

Describe the Bug

On three different applications Angular are failing all test that use @angular-devkit/schematics. Two of the applications were passing fine on Angular 17.2.0 but failed after upgrading to 17.3.7. The third application was a new one that was created on 17.3.7 to just for testing purses.

Standard jest tests, eg testing 'Hello world' are passing. But anything using schematics is throwing with the error The encoded data was not valid for encoding utf-8.

Minimal Reproduction

Create a new Angular application on 17.3.7 (latest version). Change to using Jest. Create a unit test that uses any schematics, and it throws with an encoding utf-8 error.

Expected Behavior

Expect test to be able to run against anything with schematics, not to straight away fail.

Environment

Test file example:

global.TextEncoder = TextEncoder
// @ts-expect-error
global.TextDecoder = TextDecoder

import { Tree } from '@angular-devkit/schematics';
import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
import * as path from 'path';
const collectionPath = path.join(__dirname, '../collection.json');

describe('hello-world', () => {
  it('works', async () => {
    const runner = new SchematicTestRunner('schematics', collectionPath);
    const tree = await runner.runSchematic('hello-world', {}, Tree.empty());
    expect(tree.files).toEqual([]);
  });
  it('works', async () => {
    const workspaceOptions = {
      name: 'workspace',
      newProjectRoot: 'projects',
      version: '7.0.0',
    };
    const defaultAppOptions = {
      name: 'bar',
      inlineStyle: false,
      inlineTemplate: false,
      viewEncapsulation: 'Emulated',
      routing: false,
      style: 'css',
      skipTests: false
    };
    const runner = new SchematicTestRunner('schematics', collectionPath);
    const workspaceTree = await runner.runExternalSchematic(
      '@schematics/angular',
      'workspace',
      workspaceOptions
    );
    const appTree = await runner.runExternalSchematic('@schematics/angular', 'application', defaultAppOptions, workspaceTree);
    const tree = await runner.runSchematic('hello-world', {}, appTree);
    expect(tree.files[0]).toEqual('/README.md');
  });
});

Please provide a link to a minimal reproduction of the bug

https://github.com/cathey191/test-jest

Please provide the exception or error you saw

Error: Schematic "hello-world" not found in collection "schematics".

    at SchematicEngine.createSchematic (/node_modules/@angular-devkit/schematics/src/engine/engine.js:246:23)
    at CollectionImpl.createSchematic (/node_modules/@angular-devkit/schematics/src/engine/engine.js:82:29)
    at SchematicTestRunner.runSchematic (/node_modules/@angular-devkit/schematics/testing/schematic-test-runner.js:63:44)
    at /src/app/schematic-test.spec.ts:14:31
    at _ZoneDelegate.invoke (/node_modules/zone.js/bundles/zone.umd.js:412:32)
    at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (/node_modules/zone.js/bundles/zone-testing.umd.js:2164:43)
    at _ZoneDelegate.invoke (/node_modules/zone.js/bundles/zone.umd.js:411:38)
    at ZoneImpl.run (/node_modules/zone.js/bundles/zone.umd.js:147:47)
    at Object.wrappedFunc (/node_modules/zone.js/bundles/zone-testing.umd.js:450:38)
    at Promise.then.completed (/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async _runTest (/node_modules/jest-circus/build/run.js:252:3)
    at async _runTestsForDescribeBlock (/node_modules/jest-circus/build/run.js:126:9)
    at async _runTestsForDescribeBlock (/node_modules/jest-circus/build/run.js:121:9)
    at async run (/node_modules/jest-circus/build/run.js:71:3)
    at async runAndTransformResultsToJestFormat (/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.7
Node: 20.11.0
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 17.3.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.7
@angular-devkit/build-angular   17.3.7
@angular-devkit/core            17.3.7
@angular-devkit/schematics      17.3.7
@angular/cli                    17.3.7
@angular/ssr                    17.3.7
@schematics/angular             17.3.7
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

Anything else?

No response

[alan-agius4]

Thanks for reporting this issue. Luckily, it has already been fixed in 17.3.8. Please update to the most recent version to resolve the problem.

[clydin]

This is unfortunately a longstanding defect within Jest itself. As mentioned above, a workaround is available in the next release of Angular.
For more details please see: jestjs/jest#2549

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}