我的应用程式正常运作,但无法测试

时间:2018-06-21 10:03:30

标签: javascript reactjs jestjs

单元测试返回错误,但是当我启动我的应用程序时,一切正常。

问题是,当箭头函数作为onPress回调返回callOnSubmitWithData()时,不会调用模拟的onSubmit函数,但是在启动的应用程序中一切正常。

Jest中含酶的单元测试:

const setup = (propOverrides) => {
	const props = Object.assign({
		fields: [],
		error: '',
		onSubmit() {}
	}, propOverrides);

	const wrapper = shallow(
			<Form {...props}/>
	);

	return {
		props,
		wrapper
	};
};

it('sends fields data to callback after push submit button', () => {
  const inputValue = 'Some text';
  const submitCallback = jest.fn();

  const {wrapper, props} = setup({
    onSubmit: submitCallback,
    fields: [
      {
        key: 'first',
        value: inputValue
      },
      {
        key: 'second',
        value: inputValue
      }
    ]
  });

  const output = {
    [props.fields[0].key]: inputValue,
    [props.fields[1].key]: inputValue
  };

  wrapper.setState({isSubmitDisabled: false});
  wrapper.update();
  wrapper.find(Button).simulate('click');

  expect(submitCallback).toHaveBeenCalledWith(output);
});

还有我的一部分:

class Form extends React.Component {
	constructor(props) {
		super(props);

    //Create State
    
    //Other bindings
		this.callOnSubmitWithData = this.callOnSubmitWithData.bind(this);
	}
  
  //...
  
	callOnSubmitWithData() {
		const data = this.extractFieldsData();
		this.props.onSubmit(data);
	}

	extractFieldsData() {
		//Returns object with all fields values
	}

	render() {
		const {fields, error, buttonTitle} = this.props;

		return (
			<View>
				<View>
				{
					fields.map((data) => {
						//...
						return (<AuthTextInput/>);
					})
				}
				</View>

				<Button 
					title={buttonTitle}
					onPress={() => this.callOnSubmitWithData()}
					disabled={this.state.isSubmitDisabled}
				/>
			</View>
		);
	}
}

export default Form;

1 个答案:

答案 0 :(得分:1)

原因是simulate()。您将处理程序附加到onPress,但调用simulate('click')

您需要准确呼叫onPress。也许simulate('press')可以工作。

如果没有,你可以

wrapper.find(Button).props().onPress();
wrapper.update();

然后您的模拟将运行。