使用酶进行测试时，如何在 React 组件中模拟“this.props”？

debugcn 发表于 Dev

马克斯·特拉维斯

所以，我的目标是cashedImageCheker根据从this.props-> 接收到的imageFetchedURL值来达到必须返回 string的 func 。我的问题是我无法理解如何将此值放入cashedImageCheker我的组件的相应 func中Banners。

我尝试使用 Enzyme.setProps({})方法在我的测试组件中传输模拟道具，但现在我只得到undefined. 下面是我的测试和组件代码。

感谢您的任何帮助...

测试文件：

import React from 'react'
import { mount, shallow } from 'enzyme'

import Banners from '../'

describe('<Banners />', () => {
  it('imageFetchedURL must return true', () => {
    const Component = shallow(<Banners />)

    Component.setProps({
      imageFetchedURL: 'https://google.com/la-la-la/1.jpg'
    })
    const { imageFetchedURL } = Component.instance().cashedImageCheker()

    expect(imageFetchedURL.length).toBe(33)
  })
})

组件文件：

import PropTypes from 'prop-types'
import React, { Component } from 'react'

class Banners extends Component {
  cashedImageCheker = () => {
    const { imageFetchedURL } = this.props
    const imageFetchCached = imageFetchedURL && imageFetchedURL.length > 1

    return imageFetchCached
  }

  render() {
    const isLocalImgCached = this.cashedImageCheker()
    return (
      <div className='bannerWrap'>
        {isLocalImgCached}
      </div>
    )
  }
}

export default Banners

舒巴姆·哈特里

在测试你的组件时，你可以传递它所需的道具，同时浅安装组件，如

describe('<Banners />', () => {
  it('imageFetchedURL must return true', () => {
    const Component = shallow(<Banners imageFetchedURL={'https://google.com/la-la-la/1.jpg'}/>)

    const imageFetchedURL = Component.instance().cashedImageCheker()

    expect(imageFetchedURL.length).toBe(33)
  })
})

代码测试用例中的主要问题还在于，cashedImageChecker 不会返回一个对象而是一个值，因此您需要编写

const imageFetchedURL = Component.instance().cashedImageCheker()

代替

const { imageFetchedURL } = Component.instance().cashedImageCheker()

进行上述更改也将允许您setProps测试组件方法。

describe('<Banners />', () => {
  it('imageFetchedURL must return true', () => {
    const Component = shallow(<Banners />)

    Component.setProps({
      imageFetchedURL: 'https://google.com/la-la-la/1.jpg'
    })
    const imageFetchedURL = Component.instance().cashedImageCheker()

    expect(imageFetchedURL.length).toBe(33)
  })
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。