reactjs - 开玩笑/反应。如何在expect(setInterval).toHaveBeenLastCalledWith()中调用函数？

Question

因此，我需要在测试组件 throw Jest 环境期间进行function回调。setInteval但现在我总是得到an error message以下字符串expect(setInterval).toHaveBeenLastCalledWith(expect.any(timer()), 20000)：

预期的模拟函数最后一次调用时使用：未定义为参数 1，但它是使用 [Function anonymous] 调用的。

我真的无法理解如何将我的功能_startPoolingTimer从组件传递到toHaveBeenLastCalledWith......

我会很感激任何帮助

---

测试文件：

import React from 'react'
import { shallow, mount } from 'enzyme'
import initialState, { attemptButtonActive } from './mocks/row'
import Row from '../Row'

describe('<Row />', () => {
  it('timer should start, make pooling request and after 20000 mc make pool request again', () => {
    jest.useFakeTimers()
    const Component = mount(<Row {...initialState} />)
    const { poollingTimerId, count } = Component.instance().state
    const timer = Component.instance()._startPoolingTimer

    expect(count).toBe(1)
    expect(poollingTimerId).toBeTruthy()
    expect(setInterval).toHaveBeenCalledTimes(1)
    expect(setInterval).toHaveBeenLastCalledWith(expect.any(timer()), 20000)
    expect(count).toBe(9)
  })
})

组件文件：

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

export class Row extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      count: 0,
      poollingTimerId: null
    }
  }

  componentDidMount() {
    let poollingTimerId = setInterval(this._startPoolingTimer, 20000)
  }

  _startPoolingTimer = () => {
    const { startPooling, additionalInfoGlobal } = this.props
    const moneyFromServer = additionalInfoGlobal.moneyToCollect
    startPooling()

    this.setState({
      count: moneyFromServer
    })
  }

  render() {
    return (
      <Row {...props}>
          {'hh'}
      </Row>
    )
  }
}

export default Row

标签： reactjsjestjsenzyme

Answer 1

import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'
import {connect} from 'react-redux';

export class Row4Collect extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      count: 0,
      poollingTimerId: null
    }
  }

  componentDidMount() {
    let poollingTimerId = setInterval(this.props._startPoolingTimer, 20000)
  }

  _startPoolingTimer = () => {
    const { startPooling, additionalInfoGlobal } = this.props
    const moneyFromServer = additionalInfoGlobal.moneyToCollect
    startPooling()

    this.setState({
      count: moneyFromServer
    })
  }

  render() {
    return (
      <Row {...props}>
          {'hh'}
      </Row>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
    return {
         _startPoolingTimer: () => this._startPoolingTimer()
    }
}

export default connect(undefined, mapDispatchToProps )(Row);

像这样更新它。

完成更新后，请使用 spy 作为道具并测试您的功能。

你的测试看起来像这样

import React from 'react'
import { shallow, mount } from 'enzyme'
import Row from '../Row'

describe('<Row />', () => {
  it('timer should start, make pooling request and after 20000 mc make pool request again', () => {
    const spyFn = jest.fn();
    const Component = mount(<Row {...initialState} _startPoolingTimer= {spyFn} />)
    expect(spyFn).toHaveBeenLastCalledWith();


  })
})

我开玩笑地做到了这一点。