如何测试一个组件是否具有与Jest和酶反应(本机)的功能？
如何测试一个组件是否具有与Jest和酶反应(本机)的功能？
提问于 2018-10-05 12:46:42
我正在构建一个，我在单元测试中使用Jest和酶类。此外，我使用的是TypeScript。
我使用福米克构建以下表单。
import strings from "./strings";
import styles from "./styles";
import { strings as loginStrings } from "../../screens/Login";
import { Formik, FormikActions, FormikProps } from "formik";
import React, { Component } from "react";
import { View } from "react-native";
import { Button, Input } from "react-native-elements";
import { NavigationScreenProp } from "react-navigation";
import { object as yupObject, string as yupString } from "yup";
export interface FormValues {
email: string;
password: string;
}
export interface Props {
navigation: NavigationScreenProp<any, any>;
}
export default class LoginForm extends Component<Props, object> {
handleSubmit = (values: FormValues, formikBag: FormikActions<FormValues>) => {
// ... api calls and stuff
};
renderForm = ({
values,
handleSubmit,
setFieldValue,
touched,
errors,
setFieldTouched,
isValid,
isSubmitting
}: FormikProps<FormValues>) => (
<View style={styles.container}>
// ... two inputs and a button
</View>
);
render() {
return (
<Formik
initialValues={{ email: "", password: "" }}
onSubmit={(values: FormValues, formikBag: FormikActions<FormValues>) =>
this.handleSubmit(values, formikBag)
}
validationSchema={yupObject().shape({
email: yupString()
.email(strings.invalidEmailFormat)
.required(strings.emailRequired),
password: yupString()
.min(8, strings.passwordMinLength)
.required(strings.passwordRequired)
})}
render={(formikBag: FormikProps<FormValues>) => this.renderForm(formikBag)}
/>
);
}
}正如你所看到的，它只是一个简单的形式。现在我想测试<Formik />组件是否通过了renderForm()和handleSubmit，所以我编写了以下测试：
it("should be passed the component's handleSubmit function for onSubmit", () => {
expect(wrapper.find("Formik").prop("onSubmit")).toEqual(
(values: FormValues, formikBag: FormikActions<FormValues>) =>
wrapper.instance().handleSubmit(values, formikBag)
);
});renderForm()也是如此。不幸的是，这会引发一个错误：
● LoginForm › rendering › should be passed the component's handleSubmit function for onSubmit
expect(received).toEqual(expected)
Expected value to equal:
[Function anonymous]
Received:
[Function onSubmit]
Difference:
- Expected
+ Received
- [Function anonymous]
+ [Function onSubmit]
28 |
29 | it("should be passed the component's handleSubmit function for onSubmit", () => {
> 30 | expect(wrapper.find("Formik").prop("onSubmit")).toEqual(
| ^
31 | (values: FormValues, formikBag: FormikActions<FormValues>) =>
32 | wrapper.instance().handleSubmit(values, formikBag)
33 | );因此，我不确定如何才能正确地测试函数是否已经传递给组件。一个人会怎么做？
我发现有一种方法可以工作，就是像这样将函数传递给<Formik />：
onSubmit={this.handleSubmit}
render={this.renderForm}然后只是：
expect(wrapper.find("Formik").prop("onSubmit)).toEqual(wrapper.instance().onSubmit)问题是，我在过去的单元测试中遇到了麻烦，当时我只是通过了这样的函数。同样，这样我就可以松掉TypeScript的类型。有没有办法让我的第一次尝试发挥作用？“
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-05 13:17:30
当您定义这个匿名函数时，您实际上是在创建一个新函数，因此它永远不会与呈现内部使用的函数相等。您的选项是将其存储为对象的一部分，并检查引用相等性(这正是您建议的方法)：
expect(wrapper.find("Formik").prop("onSubmit)).toEqual(wrapper.instance().onSubmit)另一个选择是模拟handleSubmit，并使您的测试检查在单击Submit按钮时是否调用了handleSubmit，在我看来，这是一个更合理的测试。
// set handleSubmit to our fake mock function
wrapper.instance().handleSubmit = jest.fn();
wrapper.update();
// Here you need to simulate a click to submit form
// I don't know how your input looks like
// but it will be similar to
inp.simulate('click')
// expect our mock function to have been called at least once
expect(wrapper.instance().handleSubmit).toHaveBeenCalledTimes(1);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52665993
复制相关文章
相似问题
腾讯云开发者
