Material UI 구성 요소를 포함하는 구성 요소를 테스트하기 위해 Enzyme 마운트 방법으로 컨텍스트를 전달하는 방법은 무엇입니까?

Question

Enzyme의 mount을 사용하여 여러 Material UI 구성 요소가 중첩 된 내 구성 요소를 테스트하려고합니다. 테스트를 실행할 때이 오류를 얻을 :

TypeError: Cannot read property 'prepareStyles' of undefined

을 뒷조사 한 후, I did found that a theme needs to be passed down in a context. 테스트에서 그렇게하고 있지만 여전히이 오류가 발생합니다.

내 시험 :

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

내 검색 창 구성 요소가 비 저장 구성 요소입니다, 그래서 어떤 상황에서 당기는하고 있지 않다. 그러나 내가있을 때조차도 나는 여전히 같은 오류를 낳는다.

내가 뭘 잘못하고 있니? mount 옵션에 childContextTypes을 추가

Answer 1

봅니다 :

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

그 일을함으로써 당신은 그것을 사용할 수있는 muiTheme 컨텍스트를 통해 아이들의 만들기 위해 효소 래퍼를 설정합니다.