javascript - 在React浅 enzyme -Jest测试用例上传递上下文

如何传递上下文并使用辅助方法提取数据？

请参见以下代码段：

import AppContext from '../../context/AppContext'
import extractDatta from '../../helper';

class App extends Component{
  static contextType = AppContext

  componentWillMount(){
   const resolvedData = extractData("/home",this.context)
  }

 render(){
   return(
  )
 }

}

helper / index.js：

const extractData = (path, context) => {
  // getting context as undefined
}

App.test.js：

describe('App test suites', () => {
  let wrapper;
  let appContext;
  beforeEach(() => {
    appContext = {name: "Application"}
    wrapper = shallow(<Supplier />, { appContext })
  })
  it('Should render the App Component', () => {
    expect(wrapper).toMatchSnapshot();
  })
})

任何帮助表示赞赏:)

最佳答案

因此，这是我的棘手解决方法，而酶团队正在努力完成[https://github.com/airbnb/enzyme/issues/1553](React 16支持）。我在组件类上提供了旧版contextTypes，允许根据文档传递上下文。

import PropTypes from "prop-types";

describe('App test suites', () => {
  let wrapper;
  let appContext;
  beforeEach(() => {
    appContext = {name: "Application"}

    // Hack in the legacy context API just for tests. You'll get a warning, but it
    // ought to work...
    Supplier.contextTypes = {
      name: PropTypes.string
    }

    wrapper = shallow(<Supplier />, { appContext })
  })

  it('Should render the App Component', () => {
    expect(wrapper).toMatchSnapshot();
  })
})