Wie Unit-Test React-Redux verbundene Komponenten?

Bin ich mit Mocha, Chai, Karma, Sinon, Webpack für Unit-tests.

Ich folgte diesem link, um bei der Konfiguration meines Test-Umgebung für Reagieren-Redux-Code.

https://medium.com/@scbarrus/how-to-get-test-coverage-on-react-with-karma-babel-and-webpack-c9273d805063#.7kcckz73r

Kann ich erfolgreich testen, meine action-und Reduzierstücke javascript-code, aber wenn es ums testen geht meine Komponenten werfen immer einige Fehler.

import React from 'react';
import TestUtils from 'react/lib/ReactTestUtils'; //I like using the Test Utils, but you can just use the DOM API instead.
import chai from 'chai';
//import sinon from 'sinon';
import spies from 'chai-spies';

chai.use(spies);

let should = chai.should()
  , expect = chai.expect;

import { PhoneVerification } from '../PhoneVerification';

let fakeStore = {
      'isFetching': false,
      'usernameSettings': {
        'errors': {},
        'username': 'sahil',
        'isEditable': false
      },
      'emailSettings': {
        'email': '[email protected]',
        'isEmailVerified': false,
        'isEditable': false
      },
      'passwordSettings': {
        'errors': {},
        'password': 'showsomestarz',
        'isEditable': false
      },
      'phoneSettings': {
        'isEditable': false,
        'errors': {},
        'otp': null,
        'isOTPSent': false,
        'isOTPReSent': false,
        'isShowMissedCallNumber': false,
        'isShowMissedCallVerificationLink': false,
        'missedCallNumber': null,
        'timeLeftToVerify': null,
        '_verifiedNumber': null,
        'timers': [],
        'phone': '',
        'isPhoneVerified': false
      }
}

function setup () {
    console.log(PhoneVerification);
    //PhoneVerification.componentDidMount = chai.spy();
    let output = TestUtils.renderIntoDocument(<PhoneVerification {...fakeStore}/>);
    return {
        output
    }
}

describe('PhoneVerificationComponent', () => {
    it('should render properly', (done) => {
        const { output } = setup();
        expect(PhoneVerification.prototype.componentDidMount).to.have.been.called;
        done();
    })
});

Diese folgende Fehlermeldung kommt mit obigen code.

FAILED TESTS:
  PhoneVerificationComponent
    ✖ should render properly
      Chrome 48.0.2564 (Mac OS X 10.11.3)
    Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Habe versucht, das Umschalten von sinon Spione chai-spies.

Wie soll ich das Gerät testen, meine Reagieren-Redux Angeschlossenen Komponenten(Intelligente Komponenten)?

InformationsquelleAutor der Frage Ayushya | 2016-02-01

35

Ein schöner Weg, dies zu tun, ist der export sowohl Ihre einfache Komponente, und die Komponente eingewickelt in Verbindung. Der export benannt werden würde, die Komponente ist der Standardwert der gewickelten Komponente:
```
export class Sample extends Component {

    render() {
        let { verification } = this.props;
        return (
            <h3>This is my awesome component.</h3>
        );
    }

}

const select = (state) => {
    return {
        verification: state.verification
    }
}

export default connect(select)(Sample);
```
Auf diese Weise können Sie importieren Sie normalerweise in Ihrer app, aber wenn es darum geht zu testen, können Sie importieren Sie Ihre namens export mit import { Sample } from 'component'.

InformationsquelleAutor der Antwort Ashwin van Dijk

Testen Sie die angeschlossene Komponente und ich denke, Sie sollten dies tun. Sie können testen möchten, die nicht verbundene Komponente zuerst, aber ich schlage vor, dass Sie keine vollständige Testabdeckung ohne auch Tests der angeschlossenen Komponente.

Unten ist eine ungetestete Auszug von dem, was ich mit Redux und Enzym. Die zentrale Idee ist die Verwendung von Provider zu verbinden, der Staat im test der angeschlossenen Komponente im test.

import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import SongForm from '../SongForm'; //import the CONNECTED component

//Use the same middlewares you use with Redux's applyMiddleware
const mockStore = configureMockStore([ /* middlewares */]);
//Setup the entire state, not just the part Redux passes to the connected component.
const mockStoreInitialized = mockStore({ 
    songs: { 
        songsList: {
            songs: {
                songTags: { /* ... */} 
            }
        }
    }
}); 

const nullFcn1 = () => null;
const nullFcn2 = () => null;
const nullFcn3 = () => null;

const wrapper = mount( //enzyme
        <Provider store={store}>
          <SongForm
            screen="add"
            disabled={false}
            handleFormSubmit={nullFcn1}
            handleModifySong={nullFcn2}
            handleDeleteSong={nullFcn3}
          />
        </Provider>
      );

const formPropsFromReduxForm = wrapper.find(SongForm).props(); //enzyme
expect(
        formPropsFromReduxForm
      ).to.be.deep.equal({
        screen: 'add',
        songTags: initialSongTags,
        disabled: false,
        handleFormSubmit: nullFcn1,
        handleModifySong: nullFcn2,
        handleDeleteSong: nullFcn3,
      });

===== ../SongForm.js

import React from 'react';
import { connect } from 'react-redux';

const SongForm = (/* object */props) /* ReactNode */=> {
    /* ... */
    return (
        <form onSubmit={handleSubmit(handleFormSubmit)}>
            ....
        </form>

};

const mapStateToProps = (/* object */state) /* object */=> ({
    songTags: state.songs.songTags
});
const mapDispatchToProps = () /* object..function */=> ({ /* ... */});

export default connect(mapStateToProps, mapDispatchToProps)(SongForm)

Möchten Sie möglicherweise erstellen Sie einen Shop mit reinem Redux. redux-mock-Shop ist nur ein light-weight version, es bedeutete für die Prüfung.

Den Sie verwenden möchten, können reagieren-addons-test-utils statt airbnb - Enzym.

Nutze ich airbnb ist chai-Enzym zu haben, Reagieren-bewusst erwarten Optionen. Es war nicht nötig in diesem Beispiel.

InformationsquelleAutor der Antwort JohnSz

1

Versuchen, die Schaffung von 2 Dateien, eine mit der Komponente selbst, wird nicht bewusst von jedem Geschäft oder irgendetwas (PhoneVerification-component.js). Dann der zweite (PhoneVerification.js), die Sie in Ihrer Anwendung verwenden, und, die gibt nur die erste Komponente abonniert store über connect Funktion, so etwas wie
```
import PhoneVerificationComponent from './PhoneVerification-component.js'
import {connect} from 'react-redux'
...
export default connect(mapStateToProps, mapDispatchToProps)(PhoneVerificationComponent)
```
Dann können Sie testen Sie Ihre "dumme" Komponente, indem die PhoneVerification-component.js im test und die Bereitstellung der notwendigen verspottet Requisiten. Es gibt keinen Zeitpunkt des Tests bereits getestet (connect Dekorateur, mapStateToProps, mapDispatchToProps etc...)

InformationsquelleAutor der Antwort george.cz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.