Question

我正在做一些单元测试，但我坚持尝试使用此方法。我还使用物化下拉菜单，我认为这是相关的。有人遇到这个问题并且可以提供帮助吗？

我的代码成功

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

Answer 1

您的直接错误是您对$进行了存根处理，现在不再有dropdown属性。如果您希望此方法有效，则需要返回一个模拟的dropdown函数以及您碰巧要调用的任何其他jquery函数。

最后，您的测试将只是您进行的所有jquery调用的反映。它们将是复杂且脆弱的，因为您需要创建这么多的存根（stub）只是为了重新生成您正在工作的环境。

因此，由于这个原因，您根本不应该尝试对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（无论测试需要什么）。

如何在Sinon js中存根jquery选择器

1 个答案: