Question

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

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

我的组件导入highcharts，它的模块类似

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

我在模拟 /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模块，我无法弄清楚如何模拟其他高图表功能，例如

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

模拟嘲笑（带有导出）以进行笑话单元测试

0 个答案: