无法读取未定义的属性“方向”，仅测试

Question

我刚刚添加TouchableOpacity到一个组件，应用程序运行良好，但我的测试，使用react-native-testing-library，无法运行：

  ? Test suite failed to run

    TypeError: Cannot read property 'Direction' of undefined

      at Object.Direction (node_modules/react-native-gesture-handler/Directions.js:3:39)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:2:1)

我刚刚删除并重新添加react-native-gesture-handler了纱线，然后运行pod install. 同样，应用程序正在运行，但测试无法运行。

我实际上在使用<Text onPress={() => onOptionPress(opt)} />而不是TouchableOpacity.

成分：

const SelectOptions = ({ field, dismissOverlay, onOptionPress }) => {
  return (
    <Overlay
      isVisible
      overlayStyle={styles.overlay}
      height={"auto"}
      onBackdropPress={dismissOverlay}
    >
      <View>
        {field.options.map((opt, i) => (
          <TouchableOpacity
            style={styles.option}
            key={i}
            onPress={() => onOptionPress(opt)}
          >
            <Text>{opt}</Text>
          </TouchableOpacity>
        ))}
      </View>
    </Overlay>
  );
};

测试：

describe("CardFormView", () => {
  let wrapper, birthdayField;

  beforeEach(() => {
    wrapper = render(
      <React.Fragment>
        <CardFormView form={form} />
      </React.Fragment>
    );
    birthdayField = wrapper.getByText("Add a Birthday Gift Card");
  });

  const message1 =
    "...";
  const message2 =
    "...";

  it("shows the options for a birthday card when clicked", () => {
    fireEvent.press(birthdayField);
    expect(wrapper.getByText(message1)).toBeDefined();
  });

  it("sets an option when clicked", () => {
    fireEvent.press(birthdayField);
    const firstOption = wrapper.getByText(message1);
    fireEvent.press(firstOption);
    expect(wrapper.queryByText(message2)).toBeNull();
    expect(wrapper.getByText(message1)).toBeDefined();
  });
});

Answer 1

这是因为你不是在嘲笑 react-navigation-gesture-handler

要使用模拟，react-navigation-gesture-handler您应该从 jest.config.json 或 jest.config.js 中的 node_modules 添加 jestSetup.js

setupFiles: [
  "./node_modules/react-native-gesture-handler/jestSetup.js"
]

我从以下链接中找到了一个参考，它对我有用。

https://github.com/software-mansion/react-native-gesture-handler/issues/344#issuecomment-489547513

Answer 2

对我来说，只是添加setupFiles不起作用。我在package.json 的“jest”处添加了 setupFiles 和transformIgnorePatterns

这里是使手势处理程序工作的代码，但我使用AsyncStorage对其进行了测试，并且存储停止工作。如果您不使用 AsyncStorage，我认为这段代码会很好用！

"setupFiles": [
     "./node_modules/react-native-gesture-handler/jestSetup.js"
],
"transformIgnorePatterns": [
     "/node_modules/(?!native-base)/"
]

我的参考：https : //github.com/software-mansion/react-native-gesture-handler/issues/344

Answer 3

更新 package.json 并重新安装 npm 包对我有用。

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": ["node_modules/(?!(jest-)?react-native|@?react-navigation)"],
    "setupFiles": ["./node_modules/react-native-gesture-handler/jestSetup.js"]
}