Jak przekazać kontekst do metody montażu enzymu, aby przetestować komponent, który zawiera składnik Material UI?

Question

Próbuję użyć mount z Enzyme, aby przetestować mój składnik, w którym zagnieżdżono kilka komponentów Material Imi. Otrzymuję ten błąd podczas uruchamiania testu:

TypeError: Cannot read property 'prepareStyles' of undefined

Po pewnym kopania, I did found that a theme needs to be passed down in a context. Robię to w teście, ale wciąż dostaję ten błąd.

Moje testy:

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

Mój składnik searchbar jest bezpaństwowcem składnik, więc nie jestem pociągnięcie w dowolnym kontekście. Ale nawet kiedy jestem, wciąż mam ten sam błąd.

Co robię źle?

Answer 1

spróbuj dodać childContextTypes w opcjach mount:

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

Robiąc go ustawić opakowanie enzymu aby muiTheme dostępny do jego dzieci poprzez kontekst.