Question

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

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

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

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

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

我知道我需要为这个函数提供一个上下文来监视底层函数，但我不确定这样做的首选方法是什么。

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

Answer 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
        });
    }
}

Sinon间谍在ES6中命名出口

1 个答案: