Внедрение ферментного / Jest Context API (React) не работает

Question

Итак, я хочу протестировать компонент, который использует контекстный API React, и он не работает.Это должно быть на первый взгляд довольно просто - как указано здесь ( React js - Как смоделировать контекст при тестировании компонента ), все, что вам нужно сделать, это что-то вроде этого:

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

Однако,У меня есть что-то очень похожее, и оно, похоже, не подхватывает.

Вот мой тестовый файл -

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)

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

Вот мой объект stateVals, который я импортирую:

const stateVals = {
  ContextNext: "ldjkfs",
  route: "/home",
  styledcomponent: "sfsdfsdfsdf",
  name: "dfasfasfasdf", 
  renderCloseAbout: false,
  aboutCardStatus: "closed",
  uploadedHistory: null, 
  greptchaTime: Date.now(), 
  loginStatus: "initial",
  registrationStatus: "N/A",
  userEmail: "N/A",
  completeRegistration: {}, 
  pageVal: "", 
  addPurchaseSubsJSON: ["empty"], 
  admins: ['SUPERDOOPERSECRET'],
  modal: {
    open: false, 
    message: ''
  }
}
export default stateVals

А вот начало компонента, который я хочу проверить -

class Home extends Component {

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

Выдает эту ошибку:

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 |             )}

Почему это происходит?

РЕДАКТИРОВАТЬ:

Это также не работает:

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')
    })
  })  
})

Ни это;

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

Ни используя это:

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

Ни это:

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

Ни это;

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

Answer 1

Ответ заключается в том, чтобы обернуть провайдера, поскольку контекстный API еще не завершен.Спасибо спенгуин!

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')
    })
  })  
})