如何在玩笑测试中访问模拟模块

Question

我不明白如何访问我在测试中使用的模拟模块的实例。您可以在下面找到我的测试代码，其中我模拟了“highcharts”库和一个名为“funnel”的 highcharts 扩展。漏斗只是您在 Highcharts 上调用的一个函数，例如扩展 Highcharts 的漏斗（Highcharts）。我在嘲笑这个功能，因为我有一个问题，我需要测试我没有在 Highcharts 上多次调用该函数，因为这会导致意外行为，有时会导致 Highcharts 崩溃。这是我的测试代码：

import React, {PureComponent} from 'react';
import {mount} from 'enzyme';
import Highcharts from 'highcharts/js/highcharts';

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

// mocking an extension
jest.mock('highcharts/js/modules/funnel.src.js', function() {
  return function mockHighcharts(mockHighcharts) {
    const localMock = {...{}, ...mockHighcharts};
    localMock.seriesTypes.funnel = jest.fn();
    return localMock;
  };
});

describe('Chart', () => {
  class Tester extends PureComponent {
    render() {
      return null;
    }
  }

  // Each Chart needs at least one child hence the Tester component
  it.only('should render', () => {
    const component = mount(
      <Chart type="funnel">
        <Tester />
      </Chart>,
      Highcharts
    );
    expect(component).toMatchSnapshot();
  });
});

我不明白如何访问模拟的 Highcharts 模块以查看我的模拟函数是否在模拟导入时被调用。当我在 Chart 组件（我在这里测试的组件）中调试并检查它的状态时，我可以看到测试使用了我的模拟模块并在其上调用了我的模拟函数。但我的问题是，我只有在挂载组件时才具有该状态，但我无法在测试中访问导入的该状态，因此无法断言我的测试行为。

您可以在下面找到我的图表的简化版本。我有在需要时动态加载某些扩展的功能（在这个简化的版本中，我总是加载漏斗，除非它已经加载）。

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Highcharts from 'highcharts/js/highcharts';

export default class Chart extends Component {
  state = {
    chart: {
      // my chart options
    }
  }

  componentDidMount() {
    if (!Highcharts.seriesTypes.funnel) {
      import('highcharts/js/modules/funnel.src.js').then((funnel) => funnel(Highcharts));
    }
    this.instance = Highcharts.Chart('myChart', this.state.chart);
  }

  render() {
    return (
      <div id="myChart" />
    );
  }
}

我喜欢做的事情是这样的

expect(Highcharts).toMatchSnapshot();

但是当我挂载它时，我测试中的 Highcharts 实例与我的组件中的不同。我什至有办法访问它，还是我的架构有问题？

感谢您的意见:)

Answer 1

如果你像这样模拟一个模块

jest.mock('./myMockedModule', ()=>jest.fn())

您可以通过像这样导入模块来访问它们：

import MockedModule from './myMockedModule'
const mockedFunction = jest.fn()
const Mock = {mockedFunction}
MockedModule.mockImplementation(Mock)
Mock.mockedFunction()
expect(mockedFunction).toHaveBeenCalledOnce()