如何在 Sinon js 中存根一个 jquery 选择器答案

【问题标题】：How to Stub a jquery selector in Sinon js如何在 Sinon js 中存根一个 jquery 选择器
【发布时间】：2019-01-01 11:12:07
【问题描述】：

我正在做一些单元测试，但我一直在尝试存根这个方法。我也在使用 materialize 进行下拉，我认为这是相关的。有人遇到过这个问题并可以提供帮助吗？

我的代码去

componentDidUpdate() {
    $('.dropdown-trigger-filter').dropdown({belowOrigin: true, alignment: 'right', closeOnClick: false});
    this.controller.isFirstLoginRedirect(this.props);
}

我的测试：

describe('Home Component', async () => {
    let container = props => { return <Home store={store} {...props} />;    };

    it('should render correctly', () => {
        const props = {};
        const wrapper = mount(shallow(container(props)).get(0));
        const tree = renderer.create(container(props)).toJSON();

        expect(tree).matchSnapshot();
    });

    it('should change state of selected tab to quotes ', () => {
        const props = {};
        const wrapper = mount(shallow(container(props)).get(0));
        const $ = sinon.stub();
        $.withArgs('.dropdown-trigger-filter').returns({});
        (wrapper.find('.tab').at(0)).simulate('click');
        expect(wrapper.state('selectedTab')).equal('##quotes');
        expect(wrapper.debug()).matchSnapshot();
    });
});

错误：

 TypeError: $(...).dropdown is not a function

【问题讨论】：

这不是一个函数。您正在返回一个没有任何内容的存根 {}。现在如果你返回{dropdown:function(){}} 那么它就会存在，:)
这确实有效！谢谢！

标签： javascript jquery unit-testing sinon

【解决方案1】：

你的直接错误是你已经存根$，现在它上面没有更多的dropdown 属性。如果你想让它工作，你需要返回一个模拟的 dropdown 函数以及你碰巧调用的任何其他 jquery 函数。

最后，您的测试将只是您所做的所有 jquery 调用的反映。它们将是复杂而脆弱的，因为您需要创建如此多的存根来重新生成您正在工作的环境。

因此，出于这个原因，您根本不应该尝试存根 jquery。如果您发现必须这样做，那么您可能需要重构以使您的测试更简单。

在这种情况下，您想测试您正在使用的 dom 是否与 jquery 调用一起使用。因此，您将希望生成一些 DOM 并对它运行一些期望，如下所示：

it('should change state of selected tab to quotes ', () => {
    const props = {};
    const wrapper = generateCompleteDom();
    (wrapper.find('.tab').at(0)).simulate('click');
    expect(wrapper.state('selectedTab')).equal('##quotes');
    expect(wrapper.debug()).matchSnapshot();

请注意，它看起来与您已经拥有的几乎相同，只是您没有存根任何东西，而只是生成了一个更完整的 DOM（无论您的测试需要什么）。

【讨论】：