时间戳

首页 > 解决方案 > 使用 Enzyme 进行测试时，如何在 React 组件中模拟“this.props”？

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

问题描述

所以，我的目标是cashedImageCheker根据从this.props->imageFetchedURL值接收到的函数，它必须返回字符串。而我的问题是我无法理解如何将此值放入cashedImageCheker我的组件的相应函数中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

标签： reactjsunit-testingjestjsenzyme

解决方案

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

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

推荐阅读