Javascript 使用redux操作创建者调用onClick（）时应该测试什么？

我正在尝试测试一个简单的复选框输入组件，该组件在其onChange方法中触发一个操作以保存复选框的值（True或False）。组成部分如下：

import React, {Component} from 'react';
import uuid from 'uuid/v1';
import './styles.css';
import { connect } from 'react-redux';
import { saveCheckboxInput } from '../../actions/userInputActions';

class CheckboxSingle extends Component {

  constructor () {
    super();
    this.onChange = this.onChange.bind(this);
    this.state = {
      id : uuid(), // generate a unique id
    }
  }

  onChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    this.props.saveCheckboxInput(this.props.linkId, value, this.props.desc, this.props.relatedLinkIds, this.props.stepNumber);
  }

  render(){
    return(
      <div className="col-sm-12 no-padding-left">
        <label className="checkbox-container label-text">{this.props.desc}
          <input id={this.state.id} type="checkbox" name="checkBoxValue" checked={this.props.isChecked}
      onChange={(e) => this.onChange(e)}/>
          <span className="checkmark"></span>
        </label>
      </div>
    )
  }
}

function mapStateToProps(state, ownProps) {
  // Tie checkBoxValue to store answer
  // Get answers in the context of checkbox (determines if checked or not)
  var stepAnswers = state.userInputState.stepResponses[ownProps.stepNumber];
  var isCheckedValue = null;
  // Note: only functional w/ one checkbox input in flow
  // TODO: make functional for multiple checkbox inputs in flow
  for(var i=0; i < stepAnswers.length; i++) {
    if(stepAnswers[i].type === "questionnaire-checkbox-input") {
      isCheckedValue = stepAnswers[i].value;
    }
  }
  return {
    isChecked : isCheckedValue
  };
}



export default connect(
  mapStateToProps,
  { saveCheckboxInput },
 )(CheckboxSingle);

import React，{Component}来自'React'；
从“uuid/v1”导入uuid；
导入“./styles.css”；
从'react redux'导入{connect}；
从“../../actions/userInputActions”导入{saveCheckboxInput}；
类CheckboxSingle扩展组件{
构造函数（）{
超级（）；
this.onChange=this.onChange.bind（this）；
此.state={
id:uuid（），//生成唯一的id
}
}
onChange（事件）{
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
this.props.saveCheckboxInput（this.props.linkId，value，this.props.desc，this.props.relatedLinkId，this.props.stepNumber）；
}
render（）{
返回(
{this.props.desc}
this.onChange（e）}/>
)
}
}
函数mapStateToProps（状态，ownProps）{
//将checkBoxValue绑定到存储答案
//在复选框的上下文中获取答案（确定是否选中）
var stepAnswers=state.userInputState.stepResponses[ownProps.stepNumber]；
var isCheckedValue=null；
//注：仅在流程中输入一个功能复选框
//TODO:使流中的多个复选框输入功能化
对于（变量i=0；i

通过以下模拟onChange（）函数的测试：

describe('CheckboxSingle', () => {

  const initialState = {
    userInputState: {
       stepResponses: [
        {},
        {
          type: "questionnaire-checkbox-input",
          name: "mockLinkId",
          value: false,
          prefixText: "mockDesc",
          relatedLinkIds: ["mock1", "mock2"]
        }
      ]
    }
  }
  const mockStore = configureStore()
  let store, shallowWrapper, dispatch

  beforeEach(() => {
    store = mockStore(initialState)
    dispatch = jest.fn();
    shallowWrapper = shallow(<CheckboxSingle store={store} dispatch={dispatch} desc="mockDesc"
  linkId="mockLinkId" relatedLinkIds={["mock1", "mock2"]} stepNumber={1} />).dive()
  });    

  // TODO: test action creator firing upon click
  test('should call onChange after clicked', () => {
    const onChangeFake = jest.spyOn(shallowWrapper.instance(), 'onChange');
    shallowWrapper.find('input[type="checkbox"]').simulate('change', { target: { checked: true } });
    expect(onChangeFake).toHaveBeenCalledTimes(1);
  });

});

description（'CheckboxSingle'，（）=>{
常量初始状态={
用户输入状态：{
步骤回答：[
{},
{
键入：“问卷复选框输入”，
名称：“mockLinkId”，
值：false，
前缀：“mockDesc”，
相关LinkId:[“mock1”、“mock2”]
}
]
}
}
const mockStore=configureStore（）
让存储、浅层说话者、调度
在每个之前（（）=>{
store=mockStore（initialState）
dispatch=jest.fn（）；
ShallowRapper=shallow（）.dive（）
});    
//TODO:单击后启动测试操作创建者
test（'单击后应调用onChange'，（）=>{
const onChangeFake=jest.spyOn（shallowRapper.instance（），'onChange'）；
shallowRapper.find（'input[type=“checkbox”]”）。simulate（'change'，{target:{checked:true}）；
期望（一旦更改为假的）。已被催收时间（1）；
});
});

---

测试this.props.saveCheckboxInput是否在组件发生更改时启动的最佳方法是什么（类似于模拟更改测试）？新酶，所以任何洞察将不胜感激

首先

onChange={（e）=>this.onChange（e）}

是一种不好的做法，因为它会为组件的每个渲染创建一个新函数，您只需编写

onChange={this.onChange}

然后，要测试是否调用了prop

saveCheckboxInput

，只需检查是否使用与原始

saveCheckboxInput

函数创建的操作相对应的参数调用了存储的

dispatch

函数

import { saveCheckboxInput } from '../../actions/userInputActions';

let store, shallowWrapper;

beforeEach(() => {
    store = mockStore(initialState)
    store.dispatch = jest.fn();
    shallowWrapper = shallow(
      <CheckboxSingle 
         store={store} 
         desc="mockDesc"
         linkId="mockLinkId" 
         relatedLinkIds={["mock1", "mock2"]} 
         stepNumber={1} 
      />
    ).dive();
}); 


test('should call onChange after clicked', () => {
  const action = saveCheckboxInput(
       "mockLinkId", 
       true, 
       "mockDesc", 
       ["mock1", "mock2"], 
       1
  );

  shallowWrapper.find('input[type="checkbox"]')
    .simulate('change', { target: { checked: true } });
  expect(store.dispatch).toHaveBeenCalledWith(action);
});

从“../../actions/userInputActions”导入{saveCheckboxInput}；
让我们储存，浅浅的说唱者；
在每个之前（（）=>{
store=mockStore（initialState）
store.dispatch=jest.fn（）；
浅振打器=浅振打器(
).潜水（）；
}); 
test（'单击后应调用onChange'，（）=>{
const action=saveCheckboxInput(
“mockLinkId”，
是的，
“mockDesc”，
[“mock1”、“mock2”]，
1.
);
shallowRapper.find（'input[type=“checkbox”]”）
.simulate（'change'，{target:{checked:true}}）；
期望（存储、调度）与（操作）一起调用；
});

这很有道理。非常感谢。