代码之家 › 专栏 › 技术社区 › Learner

传递React浅酶测试用例的上下文-jest

enzyme reactjs javascript

Learner · 技术社区 · 6 年前

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

}

助手/索引。js:

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

应用程序。测验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();
  })
})

0 回复 | 直到 6 年前

Dan Garland 6 年前

这是我在酶团队完成工作时的一个棘手的解决方法[ https://github.com/airbnb/enzyme/issues/1553](React 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();
  })
})

AntowaKartowa 5 年前

这可能不会有什么帮助。但不应该用上下文参数名而不是appContext传递Options对象吗?

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

推荐文章

Albert Olivé Corbella · 如何使用渲染道具使用Jest正确模拟React组件

7 年前

blankface · 检查Jest中我的组件上是否存在可选道具

7 年前

Leff · 测试react组件的子级数

7 年前

softshipper · 如何基于物料ui测试组件?

7 年前

Liutong Chen · 编写酶测试时何时使用“Component.WrappedComponent”

7 年前

The Walrus · 检查初始函数promise中promise后的状态

7 年前

Lennert Hofman · 如何在酶中等待来自私人功能的承诺?

7 年前

Yuriy · 将全局包与TypeScript一起使用的正确方法是什么?

7 年前

Atul kumar singh · 创建React应用程序,由于1个错误,所有测试用例都失败

7 年前

Riley Bracken · 未运行Jest/酶映像onload回调

7 年前