Question

我正在使用Jest来测试我的React组件，但我遇到了一个我以前从未见过的错误。

这是我的<Row/>组件：

class Row extends React.Component {

  constructor() {
    super();
    this.state = { userId: '', showDetails: false, showModal: false, status: '', value: '' }
    this.handleStatusChange = this.handleStatusChange.bind(this)
    this.handleModalCancel = this.handleModalCancel.bind(this)
    this.handleModalConfirm = this.handleModalConfirm.bind(this)
    this.showDetailsPanel = this.showDetailsPanel.bind(this)
  }

  showDetailsPanel() {

    if(!this.state.showDetails) {
      this.setState({
        showDetails: true
      });
    } else {
      this.setState({
        showDetails: false
      });
    }
  }

  handleModalCancel() {
    this.setState({
      showModal: false
    });
  }

  handleStatusChange(e) {
    this.setState({
      showModal: true,
      value: e.target.value,
    });
  }

  handleModalConfirm() {
    this.setState({
      showModal: false
    });
    this.props.model.status = this.state.value;
  }

  componentWillMount() {
    this.props.model.fullName = `${this.props.model.firstName} ${this.props.model.lastName}`
  }

  render() {

    const { model, modelProps, actions } = this.props;

    return (
      <div className="c-table__row">
        {this.state.showModal ?
           <Modal
             title="Are you sure?"
             copy={`Are you sure that you want to change the staus of this user to ${this.state.value}?`}
             confirmText="Yes I'm sure"
             cancel={this.handleModalCancel}
             submit={this.handleModalConfirm}
           />
           : null
        }
        <div className="c-table__row-wrapper">
        {modelProps.map((p, i) =>
          <div className={`c-table__item ${model[p] === "Active" || model[p] === "Suspended" || model[p] === "Locked" ? model[p] : ""}`} key={i}>
            {model[p]}
          </div>
        )}
        <div className="c-table__item c-table__item-sm">
          <a onClick={this.showDetailsPanel} className={this.state.showDetails ? "info showing" : "info"}><Icon yicon="Expand_Cross_30_by_30" /></a>
        </div>
      </div>

      {this.state.showDetails ?
        <Details
          tel={model.telephoneNumber}
          dept={model.department}
          role={model.role}
          username={model.username}
          status={model.status}
          statusToggle={this.handleStatusChange}
        />
      : null }
      </div>
    );
  }
}

export default Row;

这是我的测试：

import React from 'react';
import {shallow, mount} from 'enzyme';
import { shallowToJson } from 'enzyme-to-json'
import renderer from 'react-test-renderer';
import Row from '../../../src/components/tables/row.jsx';


test('clicking the info button should call showDetailsPanel', () => {

  const component = mount(<Row model={{a: 1, b: 2}} modelProps={['a', 'b']}/>)
  const showDetailsPanel = jest.spyOn(component.instance(), 'showDetailsPanel');
  component.update();
  const button = component.find('.info')

  button.simulate('click')
  expect(showDetailsPanel).toBeCalled();

})

所以我只是试图检查一下，当点击info按钮时，showDetailsPanel被调用，但它失败了TypeError: jest.spyOn is not a function。
我正在使用"jest": "^18.1.0","jest-cli": "^18.1.0","jest-junit": "^1.5.1"。

有什么想法吗？

提前致谢

Answer 1

您正在使用Jest版本18.1.0，但19.0.0已添加jest.spyOn。

如果您想使用它，则需要升级Jest。

npm install --save-dev jest@latest

或者如果你正在使用Yarn：

yarn upgrade jest --latest

Jest spyOn不是函数

1 个答案: