用酶測試反應組分與上下文：返回一個空物體

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) 

這將正確地斷言它。