Question

因此，我的目标是到达函数cashedImageCheker，该函数必须基于从this.props-> imageFetchedURL的值中返回的字符串。我的问题是我无法理解如何将该值放入组件cashedImageCheker的相应函数Banners中。

我尝试使用酶.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

Answer 1

在测试组件时，您可以像浅层安装组件一样通过它所需的道具

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

Answer 2

所以，我的目标是达到必须返回的func cashedImageCheker 字符串，基于从this.props-> imageFetchedURL中获取的值。

基于这种方式是

import React from 'react';
import { shallow } from 'enzyme';

import Banners from '../'

describe('<Banners />', () => {
  const url = 'https://google.com/la-la-la/1.jpg';
  it('imageFetchedURL must return true', () => {
    const Component = shallow(<Banners imageFetchedURL= url />)
    const imageFetchedURL = Component.instance().cashedImageCheker();
    expect(imageFetchedURL.length).toBe(33)
  })
})

我的问题是我不明白如何将这个价值转化为我的组件横幅中相应的func cashedImageCheker。

对于此查询，您必须在将道具连接到道具时知道一件事，然后在测试过程中就可以像我所做的那样将其作为实际道具传递

<Banners imageFetchedURL= url />

我尝试使用Enzyme .setProps（{}）方法来传输模拟道具在我的测试组件中

这也是绝对正确的方法。这是另一种方式。

但是您变得不确定，因为您正在破坏与您的情况无关的返回值。

使用酶进行测试时，如何在React Component中模拟'this.props'？

2 个答案: