search

chartjs / chartjs-plugin-datalabels

Chart.js plugin to display labels on data elements
https://chartjs-plugin-datalabels.netlify.app
MIT License
874 stars 473 forks source link

TypeError: helpers.merge is not a function #340

Open ibrahim-azez opened 2 years ago

ibrahim-azez commented 2 years ago

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

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 commented 2 years ago

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 commented 2 years ago

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.