ES6 中命名导出的 Sinon 间谍答案

【问题标题】：Sinon spy for named exports in ES6ES6 中命名导出的 Sinon 间谍
【发布时间】：2017-11-04 05:07:57
【问题描述】：

我使用 enzyme 和 sinon 对 React 组件进行单元测试。通常，在测试实例方法时，我只是分别监视组件实例上的方法和断言。

但是，我在应用程序的许多组件中都使用了这个全局函数，它是一个命名导出。如果我试图监视它，sinon 就会抛出。

import { openModel } from '../global/handlers/';

<Block
   onRemove={(data) => openModal(...args)}
/>

所以，目前我正在调用 prop 方法 onRemove 来断言 openModal 会被参数调用，但我无法真正监视导出的方法，即 openModal。

我知道我需要为这个函数提供一个上下文以便能够监视底层函数，但我不确定做这种事情的首选方法是什么。

PS：如果需要，我很乐意提供更多详细信息。

【问题讨论】：

标签： unit-testing reactjs sinon enzyme

【解决方案1】：

如果你使用 webpack 构建你的测试代码，那么你可以使用inject-loader 将导入的模块替换为一个存根：

describe('Your component', () => {
    let openModalSpy;
    let Component;
    // Use whatever the path to your component is
    const injectImports = require('inject-loader!components/Component');

    beforeEach(() => {
        openModalSpy = sinon.spy();

        Component = injectImports({
            openModal: openModalSpy
        }).default;
    })

    it('calls open modal with data argument', () => {
        const wrapper = shallow(
            <Component />
        );

        // Do something that will result in openModal being called

        expect(openModalSpy).to.have.been.calledWith({
            // some data
        });
    }
}

【讨论】：