Question

TL; DR：我的测试崩溃，因为与React Navigation相关的以下错误：

/path-to-app/react-native/myApp/node_modules/react-navigation/src/views/withNavigation.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                             ^^^^^^
SyntaxError: Unexpected token import

      127 | }
      128 |
    > 129 | export default withNavigation(
          |                                ^
      130 |   connect(
      131 |     null,
      132 |     { loginSuccess }

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.get withNavigation [as withNavigation] (node_modules/react-navigation/src/react-navigation.js:166:12)
      at Object.<anonymous> (app/components/LoginForm/LoginForm.js:129:32)

奇怪的是，我使用一个命名的导出，这就是为什么甚至不应该加载React Navigation的原因。

我正在尝试为我的登录表单编写单元测试。这是表格的代码：

import React, { Component } from "react";
import { View } from "react-native";
import { connect } from "react-redux";
import { Formik } from "formik";
import { object as yupObject, string as yupString } from "yup";
import { withNavigation } from "react-navigation";
import PropTypes from "prop-types";

import { loginSuccess } from "../../actions/login/login";
import alert from "../../api/alert/alert";
import { apiLoginUser } from "../../api/auth/auth";
import {
  BUTTON_TEXT_LOGIN,
  BUTTON_TEXT_FORGOTTEN_PASSWORD
} from "../../config/constants/buttonTexts";
import {
  ERROR_MESSAGE_INVALID_EMAIL_FORMAT,
  ERROR_MESSAGE_EMAIL_REQUIRED,
  ERROR_MESSAGE_PASSWORD_REQUIRED,
  ERROR_MESSAGE_PASSWORD_MIN_LENGTH
} from "../../config/constants/errorMessages";
import AuthInput from "../AuthInput/AuthInput";
import Button from "../Button/Button";
import ClearButton from "../ClearButton/ClearButton";
import styles from "./styles";

export class LoginForm extends Component {
  static propTypes = {
    navigation: PropTypes.object,
    loginSuccess: PropTypes.func,
    isSubmitting: PropTypes.bool
  };

  handleSubmit = (values, formikBag) => {
    formikBag.setSubmitting(true);
    apiLoginUser(values.email, values.password)
      .then(data => {
        this.props.navigation.navigate("HomeScreen");
        formikBag.setSubmitting(false);
        this.props.loginSuccess(data.user);
      })
      .catch(error => {
        alert(error);
        formikBag.setSubmitting(false);
      });
  };

  renderForm = (
    values,
    handleSubmit,
    setFieldValue,
    errors,
    touched,
    setFieldTouched,
    isValid,
    isSubmitting
  ) => (
    <View style={styles.inputContainer}>
      <AuthInput
        placeholder="Email address"
        value={values.email}
        onChange={setFieldValue}
        onTouch={setFieldTouched}
        name="email"
        error={touched.email && errors.email}
        editable={!isSubmitting}
      />
      <AuthInput
        placeholder="Password"
        value={values.password}
        onChange={setFieldValue}
        onTouch={setFieldTouched}
        name="password"
        error={touched.password && errors.password}
        editable={!isSubmitting}
        secureTextEntry
      />
      <ClearButton
        text={BUTTON_TEXT_FORGOTTEN_PASSWORD}
        onPress={() => {}}
        containerStyles={styles.clearButtonContainer}
        buttonTextStyles={styles.clearButtonText}
      />
      <Button onPress={handleSubmit} disabled={!isValid || isSubmitting} loading={isSubmitting}>
        {BUTTON_TEXT_LOGIN}
      </Button>
    </View>
  );

  render() {
    return (
      <Formik
        initialValues={{ email: "", password: "" }}
        onSubmit={this.handleSubmit}
        validationSchema={yupObject().shape({
          email: yupString()
          .email(ERROR_MESSAGE_INVALID_EMAIL_FORMAT)
          .required(ERROR_MESSAGE_EMAIL_REQUIRED),
          password: yupString()
          .min(12, ERROR_MESSAGE_PASSWORD_MIN_LENGTH)
          .required(ERROR_MESSAGE_PASSWORD_REQUIRED)
        })}
        render={({
          values,
          handleSubmit,
          setFieldValue,
          errors,
          touched,
          setFieldTouched,
          isValid,
          isSubmitting
        }) =>
          this.renderForm(
            values,
            handleSubmit,
            setFieldValue,
            errors,
            touched,
            setFieldTouched,
            isValid,
            isSubmitting
          )
        }
      />
    );
  }
}

export default withNavigation(
  connect(
    null,
    { loginSuccess }
  )(LoginForm)
);

这是我的测试文件：

import React from "react";
import { View } from "react-native";
import { shallow } from "enzyme";

import { LoginForm } from "./LoginForm";

describe("LoginForm", () => {
  describe("rendering", () => {
    let wrapper;
    beforeEach(() => {
      wrapper = shallow(<LoginForm />);
    });

    it("should render a <View />", () => {
      expect(wrapper.find(View)).toHaveLength(1);
    });
  });
});

如您所见，我正在使用命名导出将LoginForm与ConnectedLoginForm分开，而__mocks__已连接到Redux和React Navigation。而且，Enzyme或Jest的某些部分仍然不喜欢React Navigation。您知道如何解决此问题吗？

编辑1

我设法找到一个workaround using a NavigationService.，知道如何解决这个问题仍然很棒，因为此错误也使我无法测试使用React Navigation的屏幕。

编辑2

对于想知道how to mock this的人来说，我最终要做的是在node_modules文件夹旁边创建一个react-navigation.js文件夹。在其中，我创建了一个名为withNavigation()的文件，其中模拟了我需要模拟的所有行为。

在export const withNavigation = () => WrappedComponent => WrappedComponent;的情况下，这意味着仅实现虚拟HOC：

df['abc'] = df['country'].str[:2]

Answer 1

您可以像这样模拟依赖项，例如导航：

jest.mock("react-navigation", ({ withNavigation: (component) => component });

然后将包括导航在内的道具手动传递给您的组件：

const mockProps = {
    navigation: { navigate: jest.fn() },
    loginSuccess: jest.fn(),
    isSubmitting: true
}
wrapper = shallow(<LoginForm {...mockProps}/>);

React Native 0.56 +酶+笑话+反应导航：由于导入语句，酶崩溃

编辑1

编辑2

1 个答案: