Enzyme/Jest Context API Injection (React) Not Working - reactjs

Question

So I want to test a component that uses React's context api and it's not working. It should be seemingly pretty simple - as stated here (React js - How to mock Context when testing component) all you would have to do is something like this:
const context = { name: 'foo' };
const wrapper = mount(<SimpleComponent />, { context });
However, I have something very similar and it doesn't seem to be picking up on it.
Here is my test file -
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')
})
})
})
Here is my stateVals object I import:
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
And here is the beginning of the component I want to test -
class Home extends Component {
render(){
return(
<MainContext.Consumer>
{stateData => {
return(
<div className='grid-container abspos'>
{renderIf(stateData.state.modal.open==true)(
<Modal/>
)}
It throws this error:
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 | )}
Why is this happening?
EDIT:
This also doesn't work:
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')
})
})
})
Nor this;
const wrap = mount(<Home/>, {context: stateVals})
Nor using this:
const wrap = mount(<Home/>, {context: {stateData: stateVals}})
Nor this:
const wrap = mount(<Home/>, {context: {stateData: {state: stateVals}}})
Nor this;
const wrap = mount(<Home/>, {stateData: stateVals})

Answer 1

The answer turns out to be to wrap the provider as the context api hasn't been finalized yet. Thanks 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')
})
})
})