在React JS Jest测试中测试功能

Question

我正在Jest中进行测试，并且正在寻找一种方法来测试具有更改的特定功能，因此我需要使测试模拟更改。

这是我的测试

it('Expect HandleFilterChange', () => {
    const handleFilterChange = jest.fn();
    handleFilterChange();
    const handleChange = wrapper.find("noJava8")
    console.log("this is what Handle Change Equals ",handleChange)
    expect(handleChange).toEqual("")
    handleChange.simulate('lowCodeCoverage', { handleFilterChange: 27 });
    expect(store.getActions()[0]).to.deep.equal(noJava8);
    expect(handleFilterChange).toHaveBeenCalled()
 })

这是我的代码

handleChange = name => event => { console.log(name)
var options = {lowCodeCoverage: this.props.lowCodeCoverage, noBasePOM: this.props.noBasePOM, noJava8: this.props.noJava8};
options[name] = event.target.checked;
this.props.handleFilterChange(options);
console.log(this.handleChange)

};

<FormControlLabel
                  control={<Checkbox checked={this.props.lowCodeCoverage} 
onChange={this.handleChange('lowCodeCoverage')} 
value="lowCodeCoverage" color="primary" />}
                  label={I18n.t('filters.low-code-coverage')}
                />
                <FormControlLabel




 <WithStyles(FormControl) component="filter-options">
        <WithStyles(FormGroup)>
          <WithStyles(FormControlLabel) id="lowCodeCoverage" control={{...}} label="low-code-coverage" />
          <WithStyles(FormControlLabel) id="noBasePom" control={{...}} label="no-base-pom" />
          <WithStyles(FormControlLabel) id="noJava8" control={{...}} label="no-java-8" />
        </WithStyles(FormGroup)>

Answer 1

您可以像这样模拟change事件：

如果noJava8是FormControlLabel的ID，那是我的假设。

const handleChange = jest.fn();
wrapper = shallow(<FilterOptions.WrappedComponent handleChange= {handleChange}  />).dive();
wrapper.find('#noJava8').simulate('change');
expect(handleChange).toHaveBeenCalled();

该测试将通过。