2016-11-28 3 views
1

그래서 redux-form과 효소를 사용하면서 테스트를하려고합니다. 지금까지, 내 ​​간단한 구성 요소에 대해 나는 다음과 같은 기능일반적인 기능을 사용하여 효소로 redux-form을 테스트하십시오.

export const mountWithContext = (node, store) => { 
    const nodeToMount = store ? <Provider store={store} >{node}</Provider> : node; 
    return mount(nodeToMount); 
}; 

문제는 내가 반응-REDUX을뿐만 아니라 실패 사용하려고하고있을 때이다를 만들었습니다. 할 시도 :

class Form extends Component { 
    render() { 
    return <div><TestComponent /></div> 
    } 
} 

const TestForm = reduxForm({ form: 'testForm' })(Form); 
const enzymeWrapper = mountWithContext(TestForm, store) 

을 그리고 이런 일이 발생하는 이유는 다음과 같은 오류

'Warning: Failed prop type: Invalid prop `children` of type `function` supplied to `Provider`, expected a single ReactElement. 
Invariant Violation: React.Children.only expected to receive a single React element child. 

에게 어떤 생각을 얻고있다 방법이 문제를 해결하기 위해?

답변

1

이 질문은 6 개월입니다. 유사한 오류 메시지가 나타나는 다른 사용자 :

<Provider>{ node }</Provider>의 렌더링은 실제로 <Provider><Node /></Provider> 또는 이와 비슷한 것이어야합니다. 오류는 기본적으로 요소가 필요하며 <Node/> 대신 { node }으로 사용되는 하위 요소가 필요하다는 것을 말합니다.

export const mountWithContext = (Node, store) => { 
    const nodeToMount = store ? (
    <Provider store={store} > 
     <Node /> 
    </Provider> 
) : <Node />; 
    return mount(nodeToMount); 
}; 

그러니 그냥 {node}에서 <Node /> 또는 <Node></Node>

에 JSX에 Node 및 사용에 node의 인수 이름을 변경