【问题标题】:Alternative for http-backend-mock and ngE2e for a react application用于反应应用程序的 http-backend-mock 和 ngE2e 的替代方案
【发布时间】:2016-11-16 00:07:03
【问题描述】:

目前,我一直在使用带有量角器的 ngMockE2e 和 httpbackend mock 来制作角度页面。

现在我们正在考虑使用 react 进行开发,是否有任何替代方法可以用来模拟用于 http 调用的端到端测试的东西。

【问题讨论】:

    标签: reactjs protractor httpbackend web-api-testing ngmocke2e


    【解决方案1】:

    你可以使用 chai 和 chai-http。

    'use strict';
    
    import React from 'react';
    import {Provider} from 'react-redux';
    import {mount} from 'enzyme';
    import {expect} from 'chai';
    import configureMockStore from 'redux-mock-store';
    
    import AppCtrl from '../ui-src/components/app.ctrl';
    
    const mockStore = configureMockStore();
    
    describe('mount(<AppCtrl />)', () => {
      let store = mockStore({data1: {}});
      const wrapper = mount(
        <Provider store={store}>
          <AppCtrl />
        </Provider>
      );
      expect(wrapper.find(AppCtrl).length).to.equal(1);
      const container = wrapper.find(AppCtrl);
      it('checks div count', () => {
        expect(container.find('div').length).to.equal(4);
      });
      it('checks br count', () => {
        expect(container.find('br').length).to.equal(6);
      });
      it('checks props.Data1', () => {
        expect(container.props('Data1')).to.be.empty;
      });
      it('checks text contains', () => {
        expect(container.text()).to.contain('React Version');
      });
    });

    'use strict';
    
    import chai, {expect} from 'chai';
    import chaiHttp from 'chai-http';
    // import sinon from 'sinon';
    
    chai.use(chaiHttp);
    
    describe('server test with chai-http', () => {
      it('checks get /', () => {
        chai.request('../js/server').get('/')
          .end(function (err, res) {
             expect(err).to.be.null;
             expect(res).to.have.status(200);
          });
      });
      it('checks get /routes/getData', () => {
        chai.request('../js/server').get('/routes/getData')
          .end(function (err, res) {
            expect(err).to.be.null;
            expect(res).to.have.status(200);
            expect(res).to.have.header('content-type', 'application/json; charset=utf-8');
            expect(res).to.have.header('content-length', '93');
            expect(res).to.be.json;
            console.log('res: ', res.headers);
          });
      });
    });

    【讨论】:

    • 这是为了测试后端 API。但我正在寻找通过模拟 API 调用来测试 UI 应用程序的东西。类似于用于 Angular 的 ngMocke2e 和 httpbackend mock。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-09-21
    • 2012-06-06
    • 2020-08-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-01-20
    相关资源
    最近更新 更多