Redux: Comment faire pour tester un composant connecté?

Je suis en utilisant Enzyme à l'unité de test de mon Réagir composants. Je comprends que, dans le but de tester le raw sans lien de la composante j'aurais juste à l'exportation et le tester (je l'ai fait). J'ai réussi à écrire un test pour le composant connecté mais je suis vraiment pas sûr si ce est la bonne façon et aussi exactement ce que j'aurais envie de le tester pour l'appareil connecté.

Conteneur.jsx

import {connect} from 'react-redux';
import Login from './Login.jsx';
import * as loginActions from './login.actions';

const mapStateToProps = state => ({
  auth: state.auth
});
const mapDispatchToProps = dispatch => ({
  loginUser: credentials => dispatch(loginActions.loginUser(credentials))

});
export default connect(mapStateToProps, mapDispatchToProps)(Login);

Container.test.js

import React from 'react';
import {Provider} from 'react-redux';
import {mount, shallow} from 'enzyme';
import {expect} from 'chai';
import LoginContainer from '../../src/login/login.container';
import Login from '../../src/login/Login';


describe('Container Login', () => {
  it('should render the container component', () => {
    const storeFake = state => ({
      default: () => {
      },
      subscribe: () => {
      },
      dispatch: () => {
      },
      getState: () => ({ ...state })
    });
    const store = storeFake({
      auth: {
        sport: 'BASKETBALL'
      }
    });

    const wrapper = mount(
      <Provider store={store}>
        <LoginContainer />
      </Provider>
    );

    expect(wrapper.find(LoginContainer).length).to.equal(1);
    const container = wrapper.find(LoginContainer);
    expect(container.find(Login).length).to.equal(1);
    expect(container.find(Login).props().auth).to.eql({ sport: 'BASKETBALL' });
  });
});
InformationsquelleAutor Umair Sarfraz | 2016-08-17
  1. 22

    C'est une question intéressante.

    J'ai l'habitude de faire importer des conteneurs et composants pour effectuer le test. Pour le conteneur de test que j'utilise, redux-mock-store. Tester les composants de test async fonctions. Par exemple, dans votre cas, le processus de connexion est un async fonction à l'aide de sinon talons. Voici un extrait de la même,

    import React from 'react';
import {Provider} from 'react-redux';
import {mount, shallow} from 'enzyme';
import {expect} from 'chai';
import LoginContainer from '../../src/login/login.container';
import Login from '../../src/login/Login';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { stub } from 'sinon';
const mockStore = configureMockStore([thunk]);
describe('Container Login', () => {
let store;
beforeEach(() => {
store = mockStore({
auth: {
sport: 'BASKETBALL',
},
});
});
it('should render the container component', () => {
const wrapper = mount(
<Provider store={store}>
<LoginContainer />
</Provider>
);
expect(wrapper.find(LoginContainer).length).to.equal(1);
const container = wrapper.find(LoginContainer);
expect(container.find(Login).length).to.equal(1);
expect(container.find(Login).props().auth).to.eql({ sport: 'BASKETBALL' });
});
it('should perform login', () => {
const loginStub = stub().withArgs({
username: 'abcd',
password: '1234',
});
const wrapper = mount(<Login
loginUser={loginStub}
/>);
wrapper.find('button').simulate('click');
expect(loginStub.callCount).to.equal(1);
});
});
    • Serait-ce suffisant les tests pour mapStateToProps et mapDispatch?
    • Oui en effet.. Vous devez vérifier avec un outil de couverture, u ll trouver des il est, entièrement couverts
    • La réelle chose que je veux savoir, c'est essentiellement CE que pour tester quand nous allons tester le conteneur/composant intelligent?
    • Génial. Vous êtes toujours à droite!
    • Avez-vous fait des tests d'intégration? J'ai fait les tests unitaires, mais j'ai lu partout que nous devrions écrire des tests d'intégration ainsi. Si oui, j'ai une question importante que je peux partager le lien
    • Et par des tests d'intégration, je veux dire le déclenchement de l'action et de les faire valoir sur la boutique mise à jour
    • Pas exactement, j'ai essentiellement de montage du composant et de simuler des événements et de l'affirmer.. Mais peut-être cela peut donner u une meilleure idée des skillsmatter.com/skillscasts/...
    • Merci un million. Avez-vous travaillé avec "encoche" pour les appels d'API?
    • oui, mais je préfère moxios et sinon.. une des raisons est que j'ai utiliser axios pour les appels réseau
    • Je suis à l'aide d'axios ainsi. En fait, j'ai jamais entendu parler de moxios. Est que mieux?
    • Oui.. Il fonctionne pour moi..:)
    • Laissez-nous continuer cette discussion dans le chat.
    • stackoverflow.com/questions/39007954/...
    • Et ce stackoverflow.com/questions/39008033/...
    • lorsque je tente de monter avec le fournisseur, j'obtiens un "type d'Élément n'est pas valide: attend une chaîne de caractères (pour les composants intégrés) ou de classe/fonction (pour les composants composites) mais: undefined."
    • pouvez-vous nous montrer votre Composant Conteneur de mise en œuvre?
    • Je pense que le composant n'est pas exporté correctement

    InformationsquelleAutor anoop
  2. 3

    Comme vous l'avez souligné, la façon dont j'ai l'habitude de le faire est d'exporter l'onu-composant connecté en tant que bien, et de le tester.

    c'est à dire

    export {Login};

    Voici un exemple. Source du composant, et source de l'tests.

    Pour le enveloppés composant, je ne suis pas l'auteur des essais pour les personnes parce que mon mappages (mapStateToProps et mapDispatchToProps) sont généralement très simple. Si j'ai voulu tester un enveloppé composant, j'aimerais vraiment tester ces cartes. Voici donc ce que je voudrais choisir explicitement test, plutôt que de re-tester le composant entier enveloppé dans un formulaire.

    Il y a deux façons de tester ces fonctions. Un autre moyen serait d'exporter les fonctions dans le module lui-même.

    c'est à dire;

    export {mapStateToProps, mapDispatchToProps}

    Je ne suis pas un grand fan de cela, parce que je ne veux pas que d'autres modules dans l'application pour y accéder. Dans mes tests, j'utilise parfois babel-plugin-rewire d'accès "à la portée" des variables, de sorte que c'est ce que je ferais dans cette situation.

    Qui pourrait ressembler à quelque chose comme:

    import {
Login, __Rewire__
}
const mapStateToProps = __Rewire__.__get__('mapStateToProps');
describe('mapStateToProps', () => { ... });
    • Je l'ai fait. import Login from ../login de l'onu-composant connecté. La raison pour laquelle je ne l'ai pas utilisé {Login} est parce qu'ils se trouvent dans des fichiers séparés.
    • Aussi, ce que j'ai besoin de tester pour le composant conteneur?
    • Oh, je vois ce que tu veux dire. Jusqu'à présent, je n'ai pas testé ceux tbqh. Si j'ai fait le test, j'ai utiliser quelque chose comme babel-plugin-rewire et test mapStateToProps et mapDispatchToProps plutôt que de le enveloppés composant lui-même.
    • mapStateToProps et mapDispatchToProps comment? Pouvez-vous donner un exemple s'il vous plaît?
    • Aussi, avez-vous fait les tests d'intégration? J'ai été en mesure d'accomplir cela, mais j'ai quelques actions asynchrones que le retour des fonctions. Une idée de comment je peux tester? Je peux créer une question distincte pour elle.
    • Mise à jour de la réponse @oumayr. Laissez-moi savoir si cela aide.
    • Je ne veux pas utiliser babel-plugin-rewire tbh. Et je ne suis pas vraiment sûr de ce que vous vouliez dire dans la première option.
    • Vos fonctions de mappage sont juste des variables, de sorte que vous pouvez les exporter à partir du module. Ensuite, vous pouvez les importer dans votre test pour y accéder. De la même manière que vous êtes en train de faire export {Login} et puis import {Login} dans votre test, vous risquez de ne export {Login, mapStateToProps} et import {Login, mapStateToProps}.
    • Personnellement, j'ai été en suivant le modèle de l'exportation mapStateToProps, mapDispatchToProps, et mergeProps pour le plaisir de les tester. Je n'avais aucune idée que babel-plugin-rewire était une option, je vais essayer cela un certain temps.

    InformationsquelleAutor jamesplease
  3. 0

    Si nous avons un routeur problème, nous pouvons considérer que le routeur lib dans le fichier de test, par exemple:

    import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import { mount } from 'enzyme';
import ReadDots from './ReadDots';
const storeFake = state => ({
default: () => {
},
subscribe: () => {
},
dispatch: () => {
},
getState: () => ({ ...state })
});
const store = storeFake({
dot: {
dots: [
{
id: '1',
dot: 'test data',
cost: '100',
tag: 'pocket money'
}
]
}
});
describe('<ReadDots />', () => {
it('should render ReadDots component', () => {
const component = mount(
<Provider store={store}>
<Router>
<ReadDots />
</Router>
</Provider>
);
expect(component.length).toEqual(1);
});
});
    InformationsquelleAutor Damon Wu