时间戳

首页 > 解决方案 > 用于 Jest 单元测试的模拟 Highcharts（带导出）

reactjs - 用于 Jest 单元测试的模拟 Highcharts（带导出）

问题描述

我正在使用 Jest 测试一个 React 项目。我们的应用程序使用 Highcharts 在我们的视图上呈现数据可视化，但是在使用 Highcharts 插件模块之一“导出”时遇到问题，该模块用于捕获已经呈现的 svg Highcharts 的 dataURL。

不幸的是，在实际运行应用程序并看到一切正常时，一切都运行良好，但由于单元测试是一个很大的要求，我现在被困在这个模拟方面。

我的组件导入了 highcharts，它的模块就像

import Highcharts, { Chart } from 'highcharts';
import addExporting from 'highcharts/js/modules/exporting.src.js'
addExporting(Highcharts);

我在mocks /highcharts.ts 中创建了一个genMockFromModule

const highcharts: any = jest.genMockFromModule(`highcharts`);
highcharts.getOptions = () => ({ plotOptions: {}, exporting: {} });
module.exports = highcharts;

我在我的测试文件（tests /components/Chart.ts）中尝试过

jest.mock('highcharts', () => ({
  Chart: jest.fn(),
  setOptions: jest.fn(),
  seriesTypes: {},
}));
jest.mock('highcharts/js/modules/exporting.src.js', () => jest.fn() )

似乎无论我尝试什么，我总是遇到这个问题：

TypeError：无法读取未定义的属性“导航器”

  16 |
> 18 | addExporting(Highcharts);
     | ^
  19 |

  at node_modules/highcharts/js/modules/exporting.src.js:49:23
  at node_modules/highcharts/js/modules/exporting.src.js:1760:3

如果没有 addExporting 模块，我无法弄清楚如何模拟其他 highcharts 功能，例如

if(this.chartRef) {
    this.chartRef.destroy()
}

标签： reactjshighchartsjestjsenzyme

解决方案

推荐阅读