react - ¿Cómo pasar el contexto al método de montaje enzimático para probar el componente que incluye el componente Material UI?

material ui selects

Question

Estoy tratando de usar mount de Enzyme para probar mi componente en el que están anidados varios componentes de la IU de Material. Me sale este error al ejecutar la prueba:

TypeError: Cannot read property ''prepareStyles'' of undefined

Después de algunas excavaciones, encontré que un tema necesita ser transmitido en un contexto . Estoy haciendo eso en la prueba, pero sigo teniendo este error.

Mi prueba:

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

Mi componente de la barra de búsqueda es un componente sin estado, por lo que no estoy tirando en ningún contexto. Pero incluso cuando estoy, todavía me sale el mismo error.

¿Qué estoy haciendo mal?

Answer 1

Este es mi método práctico para probar la interfaz de usuario del material con poca profundidad y montar

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

Answer 2

Intente agregar childContextTypes en las opciones de mount :

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

Al hacerlo, configuras la envoltura de la enzima para que muiTheme esté disponible para sus hijos a través del contexto.