reactjs - enzyme /Jest 上下文 API 注入(inject)( react )不起作用

Question

所以我想测试一个使用 React 的上下文 api 的组件，但它不工作。它应该看起来非常简单 - 如此处所述 (React js - How to mock Context when testing component) 您所要做的就是这样:

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