时间戳

首页 > 解决方案 > 通过酶测试文档打印 - React

reactjs - 通过酶测试文档打印 - React

问题描述

    const htmlString = ReactDOMServer.renderToStaticMarkup(printDetailsView(this.props.savedList));
        /* istanbul ignore next */
        setTimeout(() => {
            const printWindow = window.open('', 'PRINT', `width=700,left=${left},top=${top}`);
            /* istanbul ignore next */
            printWindow.document.write(htmlString);
            /* istanbul ignore next */
            printWindow.document.close();
            /* istanbul ignore next */
            printWindow.focus();
            /* istanbul ignore next */
            printWindow.print();
            /* istanbul ignore next */
            printWindow.close();
        }, 0);

我如何在酶中模拟 document.close()、document.write。

我尝试了像下面这样的存根，但它不起作用。

 global.window.document.write = sinon.stub();
global.window.document.close = sinon.stub();



  describe('FilterPanel Connected component testing', () => {
    let wrapper;
    let tokenGet;
    let userStub;
    before(() => {
        tokenGet = sinon.stub(TokenProvider, 'get');
        tokenGet.callsFake((key) => {
            if (key === 'DP_FIRST_NAME') {
                return 'Vini';
            }
            return null;
        });
        userStub = sinon.stub(User, 'isUserLoggedIn');
        const deviceType = {
            isDesktop: true,
        };

        wrapper = mount(
            <FilterPanel
                myListsDetails={myListsDetails}
                savedListActions={savedListActions}
                actions={actions}
                deviceType={deviceType}
                messagesTexts={messagesTexts}
                store={storeFake(storeData)}
                isShared={false}
                openSlider={openSliderStub}
                savedList={savedList} />);
    });
    after(() => {
        shareListResetStub.reset();
        getSavedListsGuestStub.reset();
        tokenGet.resetHistory();
        openSliderStub.reset();
        userStub.resetHistory();
    });
    it('render FilterPanel', () => {
        expect(wrapper.find('FilterPanel').length).to.equal(1);
    });
    it('Call print function', () => {
        userStub.returns(true);
        const instance = wrapper.instance();
        instance.print();
    });

    it('Call print function', () => {
        userStub.returns(true);
        const instance = wrapper.instance();
        wrapper.setProps({
            savedList: { data: [] },
        });
        instance.print();
    });

    it('Dont print function since user is not logged in', () => {
        userStub.returns(false);
        const instance = wrapper.instance();
        instance.print();
        instance.checkAuth();
        expect(openSliderStub.called).to.be.true;
    });
});

标签： reactjsenzymestub

解决方案

不是window.document.close那个被调用，而是document.close方法 on printWindow。

Real DOM 最好完全不受影响：

const printWindowMock = {
  document: {
    write: sinon.stub(),
    ...
};

sinon.stub(window, 'open`).returns(printWindowMock);

每次测试后都应该恢复模拟，所以它们需要beforeEach在afterEach. 这可以通过测试框架插件自动处理，例如mocha-sinon.

推荐阅读