Reactjs 酶/Jest上下文API注射（React）不工作

所以我想测试一个使用React上下文api的组件，但它不工作。这看起来应该很简单-如这里所述（），您需要做的就是这样：

const context = { name: 'foo' };
const wrapper = mount(<SimpleComponent />, { context });

这是我要测试的组件的开始-

class Home extends Component {

  render(){
    return(
      <MainContext.Consumer>
      {stateData => {
        return(
          <div className='grid-container abspos'>
            {renderIf(stateData.state.modal.open==true)(
              <Modal/>
            )}

class Home扩展组件{
render（）{
返回(
{stateData=>{
返回(
{renderIf（stateData.state.modal.open==true）(
)}

它抛出以下错误：

TypeError: Cannot read property 'state' of undefined

  26 |         return(
  27 |           <div className='grid-container abspos'>
> 28 |             {renderIf(stateData.state.modal.open==true)(
     |                                 ^
  29 |               <Modal/>
  30 |             )}

TypeError:无法读取未定义的属性“state”
26 |返回(
27 |           
>28 |{renderIf（stateData.state.modal.open==true）(
|                                 ^
29 |               
30 |             )}

为什么会这样

编辑：

这也不起作用：

import * as React from 'react'
import Enzyme, { shallow, mount } from "enzyme";
import Home from '../pages/home/index'
import Adapter from "enzyme-adapter-react-16";

import stateVals from '../__mocks__/stateVals';

console.log('value of stateVals: ', stateVals)
let context = {state: stateVals }
console.log('value of context: ', context)

describe('Pages', () => {
  describe('Index', () => {
    it('should render without throwing an error', function () {
      const wrap = mount(<Home/>,  context )
      expect(wrap.find('div').text()).toBe('hello there main home')
    })
  })  
})

import*作为来自“React”的React
从“酶”中导入酶，{shall，mount}；
从“../pages/Home/index”导入主页
从“酶-适配器-反应-16”导入适配器；
从“../\uuuuu mocks\uuuuu/stateVals”导入stateVals；
console.log（'stateVals的值：'，stateVals）
let context={state:stateVals}
console.log（'context的值：'，context）
描述（'页面'，（）=>{
描述（'索引'，（）=>{
它（'应该在不引发错误的情况下呈现'，函数（）{
const wrap=mount（，上下文）
expect（wrap.find（'div'）.text（））.toBe（'hello there main home'））
})
})  
})

也不是这个,

  const wrap = mount(<Home/>,   {context: stateVals})

const wrap = mount(<Home/>,  {stateData: stateVals})

const wrap=mount（，{context:stateVals}）

也不使用此选项：

  const wrap = mount(<Home/>,  {context: {stateData: stateVals}})

const wrap=mount（，{context:{stateData:stateVals}}）

这也不是：

  const wrap = mount(<Home/>,  {context: {stateData: {state: stateVals}}})

const wrap=mount（，{context:{stateData:{state:stateVals}}）

也不是这个,

  const wrap = mount(<Home/>,   {context: stateVals})

const wrap = mount(<Home/>,  {stateData: stateVals})

const wrap=mount（，{stateData:stateVals}）

答案是包装提供程序，因为上下文api尚未最终确定。谢谢spenguin

import * as React from 'react'
import Enzyme, { shallow, mount } from "enzyme";
import Home from '../pages/home/index'
import Adapter from "enzyme-adapter-react-16";

import { Provider } from '../services/Context/Provider'

import stateVals from '../__mocks__/stateVals';

describe('Pages', () => {
  describe('Index', () => {
    it('test ', function () {
      const wrap = mount(<Provider value={{stateVals}}><Home/></Provider>)
      expect(wrap.find('#maintext').text()).toBe('hello there main home')
    })
  })  
})

import*作为来自“React”的React
从“酶”中导入酶，{shall，mount}；
从“../pages/Home/index”导入主页
从“酶-适配器-反应-16”导入适配器；
从“../services/Context/Provider”导入{Provider}
从“../\uuuuu mocks\uuuuu/stateVals”导入stateVals；
描述（'页面'，（）=>{
描述（'索引'，（）=>{
它（'test'，function（）{
常量wrap=mount（）
expect（wrap.find（'#maintext'）.text（））.toBe（'hello there main home'））
})
})  
})

另请参见。您能否共享提供商代码，以便我们能够轻松理解。