如何在Sinon js中存根jquery選擇器

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（測試所需的所有內容）。