тест с ферментом реагирующий компонент с контекстом: вернуть пустой объект

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 

, где я не прав?

Answer 1

Поскольку детали Overlay компоненты не дана, я предполагаю, что контекст в ней не используется (Пожалуйста, проверьте 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) 

Это правильно утверждать.