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

Question

Je suis en train d'utiliser mount d'Enzyme pour tester mon composant dans lequel un Matériau composant de l'INTERFACE utilisateur sont imbriqués. J'ai cette erreur lors de l'exécution de l'essai:

TypeError: Cannot read property 'prepareStyles' of undefined

Après quelques recherches, je n'ai trouvé qu'un thème doit être transmis dans un contexte. Je suis en train de réaliser que dans le test, mais 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);
  });
});

Ma barre de recherche composant est un apatride composant, donc je ne suis pas en tirant dans n'importe quel contexte. Mais même quand je suis, je reçois toujours le même message d'erreur.

Ce que je fais mal?

Answer 1

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 disponible pour ses enfants via le contexte.

Answer 2

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