通过 React 测试文档打印

Question

    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 in enzyme。

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

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

Answer 1

调用的

不是window.document.close，而是printWindow document.close方法。

真正的 DOM 最好完全不受影响：

const printWindowMock = {
  document: {
    write: sinon.stub(),
    ...
};
sinon.stub(window, 'open`).returns(printWindowMock);

模拟应在每次测试后恢复，因此需要beforeEach完成并在afterEach中恢复。这可以通过测试框架插件自动处理，例如 mocha-sinon .