TypeError: helpers.merge is not a function

[ibrahim-azez]

Hi,
I have the error down below, this happened in jest after editing jest default configs.
I am using Nx Angular to run the test.
Please take a look on the related issues down.

Current Behavior

 ● Test suite failed to run

    TypeError: helpers.merge is not a function

      3 | import { BaseChartDirective } from 'ng2-charts';
      4 |
    > 5 | import DataLabelsPlugin from 'chartjs-plugin-datalabels';
        | ^
      6 |
      7 | /**
      8 |  * Component for displaying a bar chart.

      at ../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:582:9
      at ../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:8:81
      at Object.<anonymous> (../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:11:3)
      at Object.<anonymous> (../../libs/chart/src/lib/bar-chart/bar-chart.component.ts:5:1)
      at Object.<anonymous> (../../libs/chart/src/lib/chart.module.ts:7:1)
      at Object.<anonymous> (../../libs/chart/src/index.ts:1:1)
      at Object.<anonymous> (src/app/features/dashboard/dashboard.component.ts:10:1)
      at Object.<anonymous> (src/app/features/dashboard/dashboard.component.spec.ts:12:1)
      at TestScheduler.scheduleTests (../../node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (../../node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (../../node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (../../node_modules/@jest/core/build/cli/index.js:173:3)

My test file in angular:

import { CommonModule } from '@angular/common';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';

import '@angular/localize/init';

import { AngularMaterialModule } from '@lib/core';

import { DashboardComponent } from './dashboard.component';

describe('DashboardComponent', () => {
	let component: DashboardComponent;
	let fixture: ComponentFixture<DashboardComponent>;

	beforeEach(async () => {
		await TestBed.configureTestingModule({
			imports: [
				CommonModule,
				BrowserAnimationsModule,
				HttpClientTestingModule,
				RouterTestingModule,
				ReactiveFormsModule,
				AngularMaterialModule,
			],
			declarations: [DashboardComponent],
		}).compileComponents();

		fixture = TestBed.createComponent(DashboardComponent);
		component = fixture.componentInstance;
		fixture.detectChanges();
	});

	it('should create', () => {
		expect(component).toBeTruthy();
	});
});

My jest config:

/* eslint-disable */
export default {
	displayName: 'core',
	preset: '../../jest.preset.js',
	setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
	globals: {
		'ts-jest': {
			tsconfig: '<rootDir>/tsconfig.spec.json',
			stringifyContentPathRegex: '\\.(html|svg)$',
		},
	},
	coverageDirectory: '../../coverage/libs/core',
	moduleNameMapper: {
		'^lodash-es$': 'lodash',
		'chart.js': 'node_modules/chart.js/dist/chart.mjs',
	},
	transform: {
		'^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
	},
	transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|lodash-es)'],
	snapshotSerializers: [
		'jest-preset-angular/build/serializers/no-ng-attributes',
		'jest-preset-angular/build/serializers/ng-snapshot',
		'jest-preset-angular/build/serializers/html-comment',
	],
};

Expected Behavior

• Ability to run any unit tests without issues

Steps to Reproduce

1. Create empty workspace: Run npx create-nx-workspace
2. select → apps option -> angular
3. Edit the jest config to be as given in this issue
4. Run a test, error happens

Environment

"dependencies": {
        "@angular/animations": "~14.0.0",
        "@angular/cdk": "^14.0.5",
        "@angular/common": "~14.0.0",
        "@angular/compiler": "~14.0.0",
        "@angular/core": "~14.0.0",
        "@angular/fire": "^7.4.1",
        "@angular/forms": "~14.0.0",
        "@angular/localize": "^14.0.7",
        "@angular/material": "^14.1.1",
        "@angular/material-moment-adapter": "^14.2.0",
        "@angular/platform-browser": "~14.0.0",
        "@angular/platform-browser-dynamic": "~14.0.0",
        "@angular/router": "~14.0.0",
        "@nrwl/angular": "14.4.3",
        "bootstrap": "^5.1.3",
        "chart.js": "^3.9.1",
        "chartjs-plugin-annotation": "^2.0.1",
        "chartjs-plugin-datalabels": "^2.1.0",
        "enhanced-resolve": "^5.10.0",
        "firebase": "^9.9.1",
        "highcharts": "^10.2.0",
        "moment": "^2.29.4",
        "ng2-charts": "^4.0.0",
        "path": "^0.12.7",
        "rxjs": "~7.4.0",
        "subsink": "^1.0.2",
        "tslib": "^2.0.0",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^14.0.6",
        "@angular-eslint/eslint-plugin": "~14.0.0",
        "@angular-eslint/eslint-plugin-template": "~14.0.0",
        "@angular-eslint/template-parser": "~14.0.0",
        "@angular/cli": "~14.0.0",
        "@angular/compiler-cli": "~14.0.0",
        "@angular/language-service": "~14.0.0",
        "@nrwl/cli": "14.4.3",
        "@nrwl/cypress": "14.4.3",
        "@nrwl/eslint-plugin-nx": "14.4.3",
        "@nrwl/jest": "14.4.3",
        "@nrwl/linter": "14.4.3",
        "@nrwl/workspace": "14.4.3",
        "@types/jest": "^27.4.1",
        "@types/node": "16.11.7",
        "@typescript-eslint/eslint-plugin": "^5.29.0",
        "@typescript-eslint/parser": "^5.29.0",
        "autoprefixer": "^10.4.8",
        "cypress": "^9.1.0",
        "eslint": "~8.15.0",
        "eslint-config-prettier": "8.1.0",
        "eslint-plugin-cypress": "^2.10.3",
        "jest": "^27.5.1",
        "jest-preset-angular": "^11.0.1",
        "ng-packagr": "~14.0.0",
        "nx": "14.4.3",
        "postcss": "^8.4.14",
        "postcss-import": "~14.1.0",
        "postcss-preset-env": "~7.5.0",
        "postcss-url": "~10.1.3",
        "prettier": "^2.6.2",
        "tailwindcss": "^3.1.7",
        "ts-jest": "^27.1.4",
        "ts-node": "~10.8.0",
        "typescript": "~4.7.2"
    },
    "engines": {
        "node": "16.x.x"
    }

Related Issues

#11888
nx-angular-typeerror-import-chart-registerables-is-not-iterable

[dudamirandaa]

I'm having the same error with import ChartDataLabels from 'chartjs-plugin-datalabels';. It happend after updating chartjs to version 3.x. Tests won't even render the component, but they don't fail if I comment the ChartDataLabels variable on my chart. It was working fine before the update.

[angeladeliz]

An alternative I found to run the tests was the mock in the plugin:

jest.mock('../../../../../../../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js', () => ({
  __esModule: true
}));

I don't think it's the best way, but it temporarily solves it.