효소와 테스트 컨텍스트와 반응 구성 요소 : 빈 개체를 반환

Question

나는 구성 요소에 효소와 더미 테스트를 실행하려고합니다. 테스트는 컨텍스트를 점검하려고합니다. 효소의 문서화와 같은 코드를 작성하고 있지만 컨텍스트는 항상 비어 있습니다.

import React from 'react'; 
import { shallow } from 'enzyme'; 
import Overlay from '../../../../app/components/Overlay/Overlay'; 


describe('<Overlay />',() => { 
    it.only('return a context',() => { 
    const wrapper = shallow(<Overlay />, { context: { foo: 10 } }); 
    console.log(wrapper.context()); 
    // expect(wrapper.context().foo).to.equal(10); 
    }); 
}) 

테스트의 출력은 다음과 같습니다

<Overlay /> 
{} 
✓ return a context 

어디 잘못입니까? Overlay 구성 요소의 세부 정보가 제공되지 않기 때문에

Answer 1

, 나는 (PLS childContextTypes을 확인하고 getChildContext가 제대로 정의) 예를 들어

, documents

반응에 상황에 대한 설명을 참조 컨텍스트가 사용되지 않습니다 가정 내가 테스트를 가능하게하기 위해 같은 예를 촬영 한

,

import React from 'react'; 

export default class Button extends React.Component { 
    render() { 
    return (
     <button style={{ background: this.context.color }}> 
     {this.props.children} 
     </button> 
    ); 
    } 
} 

Button.contextTypes = { 
    color: React.PropTypes.string, 
}; 

class Message extends React.Component { 
    render() { 
    return (
     <div> 
     {this.props.text} <Button>Delete</Button> 
     </div> 
    ); 
    } 
} 

class MessageList extends React.Component { 
    getChildContext() { 
    return { color: 'purple' }; 
    } 

    render() { 
    const children = this.props.messages.map((message) => 
     <Message text={message.text} /> 
    ); 
    return <div>{children}</div>; 
    } 
} 

MessageList.childContextTypes = { 
    color: React.PropTypes.string, 
}; 

나는 다음과 같이 Button 구성 요소에 대한 테스트를 만들었습니다 ,

import React from 'react'; 
import { shallow } from 'enzyme'; 
import { expect } from 'chai'; 
import Button from '../../src/components/SampleComp'; 

describe.only('<Button />',() => { 
    it('assert for context',() => { 
    const wrapper = shallow(
     <Button />, 
     { context: { color: 'red' } } 
    ); 
    expect(wrapper.context().color).to.equal('red'); 
    expect(wrapper.context('color')).to.equal('red'); 
    }); 
}); 

는

<Button /> 
    ✓ assert for context 


    1 passing (214ms) 

이 제대로 주장 할 것이다.