chartjs-plugin-datalabels
chartjs-plugin-datalabels copied to clipboard
chartjs
TypeError: helpers.merge is not a function
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
- Create empty workspace: Run npx create-nx-workspace
- select → apps option -> angular
- Edit the jest config to be as given in this issue
- 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
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.
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.
