在 ReactJS 中使用玩笑和酶测试回调函数？

Question

我是 TDD 的新手，我想在我的 Age 组件中测试我的回调函数：我的 Age.js 文件如下：

import React, { Component } from "react";
import { connect } from "react-redux";
import actions from "../../actions";
import TextFieldComponent from "../Module/TextFieldComponent";

export class Age extends Component {

  ageValueCallBack = age => {
    console.log("value is : ", age);
    this.props.selectAgeAction(age)
  };

  render() {
    const props = {
      onChange: this.ageValueCallBack,
      hintText : 'Eg. 25',
      floatingLabelText: "Age(Years)",
      value : (this.props.usersData) ? this.props.usersData.basic.age : null
    };
    return <TextFieldComponent {...props} />;
  }
}

function mapStateToProps({ usersData }) {
  return {
    usersData
  };
}

export default connect(mapStateToProps, {
  selectAgeAction: actions.selectAgeValue
})(Age);

我的 TextFieldComponent 如下：

import TextField from "material-ui/TextField";

const TextFieldComponent = props => {
  return (
    <TextField
        onChange={(event, string) => {
        props.onChange(string)
      }}
      floatingLabelText={props.floatingLabelText || "floatingLabelText"}
      value={props.value || null}
      hintText={props.hintText || "hintText will be here"}
      autoFocus ={true || props.autoFocus}
    />
  );
};

我想测试 Age 组件的 ageValueCallBack 功能，但我没有找到任何特定的方法。

任何见解都会有所帮助。

谢谢..

Answer 1

使用酶，您可以使用 simulate('change', {}, 'someString') 在 TextFieldComponent 上触发 onChange 事件。 Age.js 中的 selectAgeAction 需要是使用 jest.fn():

创建的间谍

const selectAgeAction = jest.fn()
const component = shallow(<Age selectAgeAction={selectAgeAction} />)
component.find('TextField').simulate('change', {}, '10')
expect(selectAgeAction).toHaveBeenCalledWith('10')

在 ReactJS 中使用玩笑和酶测试回调函数？

Test a callback Function using jest and enzyme in ReactJS?

javascript

tdd

reactjs

jestjs

enzyme