web-dev-qa-db-fra.com

Comment passer le contexte à la méthode de montage Enzyme pour tester le composant qui comprend le composant Material UI?

J'essaie d'utiliser mount d'Enzyme pour tester mon composant dans lequel plusieurs composants Material UI sont imbriqués. J'obtiens cette erreur lors de l'exécution du test:

TypeError: Cannot read property 'prepareStyles' of undefined

Après quelques recherches, j'ai trouvé qu'un thème doit être transmis dans un contexte . Je fais cela dans le test mais j'obtiens toujours cette erreur.

Mon test:

import expect from  'expect';
import React, {PropTypes} from 'react';
import {mount} from 'enzyme';
import SearchBar from './SearchBar';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

function setup() {
  const muiTheme = getMuiTheme();

  const props = {
    closeSearchBar: () => {},
    fetchSearchData: () => {},
    data: [],
    searching: false
  };

  return mount(<SearchBar {...props} />, {context: {muiTheme}});
}

describe('SearchBar Component', ()=> {

  it('Renders search toolbar properly', () => {
    const wrapper = setup();
    expect(wrapper.find('.toolbar').length).toBe(1);
    expect(wrapper.find('button').length).toBe(1);
  });
});

Mon composant de barre de recherche est un composant sans état, donc je ne tire dans aucun contexte. Mais même quand je le suis, je reçois toujours la même erreur.

Qu'est-ce que je fais mal?

material-uienzyme
28
Erika

Essayez d'ajouter childContextTypes dans les options mount:

return mount(
  <SearchBar {...props} />, {
    context: {muiTheme},
    childContextTypes: {muiTheme: React.PropTypes.object}
  }
);

Ce faisant, vous définissez le wrapper Enzyme pour rendre le muiTheme accessible à ses enfants via le contexte.

48
Nícolas Iensen

ceci est ma méthode pratique pour tester l'interface utilisateur matérielle avec peu profonde et monter

...
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const muiTheme = getMuiTheme();
const shallowWithContext = (node) => shallow(node, {context: {muiTheme}, childContextTypes: {muiTheme: PropTypes.object}});

const mountWithContext = (node) => mount(
  node, {context: {muiTheme}, childContextTypes: {muiTheme: PropTypes.object}}
);


// now you can do
const wrapper = shallowWithContext(<Login auth={auth} onChange={() => 'test'} />);
2
STEEL