测试 Angular 和 Chart JS

Question

目前，我在 Angular 应用程序中的笑话单元测试中收到以下错误，该应用程序正在测试使用 ChartJS 的组件。

TypeError: auto_1.default is not a constructor

图表/图形显示良好，我可以在从外部数据源馈入此演示组件的不同数据集之间切换。

我尝试将

Chart from 'chart.js/auto';

导入到测试中，模拟创建图表的各种函数，但没有成功。将 ChartJS 导入测试文件，或者创建一个新图表来在测试中进行测试没有任何作用，我仍然收到相同的错误。

.spec 文件：

import { ComponentFixture, TestBed } from '@angular/core/testing'
import { GraphDisplayComponent } from './graph-display.component';


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


  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [GraphDisplayComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(GraphDisplayComponent);
    component = fixture.componentInstance;

    fixture.detectChanges();
  });

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

组件的.ts

import {
  Component,
  ElementRef,
  Input,
  OnInit,
  ViewChild,
} from '@angular/core';
import Chart from 'chart.js/auto';

@Component({
  selector: 'app-graph-display',
  templateUrl: './graph-display.component.html',
  styleUrls: ['./graph-display.component.scss'],
})
export class GraphDisplayComponent implements OnInit {
  @Input() chartData: any;
  @ViewChild('canvas', { static: true }) canvas!: ElementRef;
  chart!: any;

  ngOnInit() {
    this.chart = new Chart(this.canvas.nativeElement, this.chartData);
  }

}

Answer 1

您遇到的错误

TypeError: auto_1.default is not a constructor

通常源于模块导入/导出语义的问题。问题很可能是 Jest 在 Angular 的默认配置下使用 CommonJS 来处理模块导入/导出。当与使用 ES 模块分发的某些库或库版本（例如 Chart.js）结合使用时，这种不匹配可能会导致错误。

您可以采取一些步骤来解决此问题：

1. Jest 配置

   确保您的 Jest 配置已正确设置以处理 ES 模块。名为

   jest-preset-angular

   的包可帮助使用 Jest 设置 Angular。如果您还没有使用它，我建议您尝试一下。

2. 模拟Chart.js

   在许多情况下，您可能不想在测试中实际实例化或运行真正的 Chart.js。相反，你可以嘲笑它。这可以完全避免错误并使您的测试运行得更快。

   在

   .spec

   文件的顶部，在任何其他导入之前：

   jest.mock('chart.js/auto', () => ({
     default: jest.fn().mockImplementation(() => ({
       // any mock methods or properties you need
     }))
   }));
   

   这模拟了

   Chart

   构造函数，因此它不执行任何操作。如果您需要测试构造函数是否被调用，或者图表实例上的方法是否被调用，您可以向模拟添加更多内容。

3. ES 模块处理

   如果您想直接处理 ES 模块，您可能需要更新 Jest 配置并使用 Babel 来帮助 Jest 理解 ES 模块。这是一个更复杂的解决方案，但对于某些设置可能是必需的。这是一个简化版本：

   1. 安装必要的 Babel 包：

      npm install --save-dev @babel/preset-env @babel/preset-typescript
      

   2. 创建或更新

      .babelrc

      文件：

      {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-typescript"
        ]
      }
      

   3. 更新您的 Jest 配置以使用 Babel：

      {
        "transform": {
          "^.+\\.tsx?$": "babel-jest"
        }
      }
      

请记住，有时运行测试的最简单方法是模拟系统中与您正在测试的内容不直接相关的部分。如果您没有明确测试 Chart.js 的行为，那么模拟它可能是您最好的选择。