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

更新package.json并重新安装npm软件包对我来说很有效。

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

Answer 2

对我来说，仅添加 setupFiles 无效。我在 package.json

中的“笑话” 中添加了setupFiles和 transformIgnorePatterns

这里是使 gestureHandler工作的代码，但是我用 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

这是因为您没有嘲笑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://www.gitmemory.com/issue/kmagiera/react-native-gesture-handler/344/489547513

Answer 4

就我而言，遇到此问题时我正在使用react-native-cli。我将其删除并安装了@react-native-community/cli。它修复了所有问题！

Answer 5

之所以发生这种情况，是因为您必须从react-native模拟l = [(1210, 1229), (1935, 2000), (1536, 1608), (1043, 1120), (1817, 1922), (900, 1023), (1632, 1759)] dates = [('{:02d}:{:02d}'.format(t[0]//100,t[0]%100),'{:02d}:{:02d}'.format(t[1]//100,t[1]%100)) for t in l] >>> dates [('12:10', '12:29'), ('19:35', '20:00'), ('15:36', '16:08'), ('10:43', '11:20'), ('18:17', '19:22'), ('09:00', '10:23'), ('16:32', '17:59')]模块。它可以在多个模块中发生，但对我而言，特别是NativeModules，ImagePicker和Linking发生。这就是我模拟本地模块所做的。

/src/testSetup.ts

@react-navigation/native

在测试中

import {NativeModules} from 'react-native';

NativeModules.RNGestureHandlerModule= {
    attachGestureHandler: jest.fn(),
    createGestureHandler: jest.fn(),
    dropGestureHandler: jest.fn(),
    updateGestureHandler: jest.fn(),
    State: {},
    Directions: {},
},

NativeModules.ImagePickerManager = {
    showImagePicker: jest.fn(),
}

NativeModules.Linking = {
    canOpenUrl: jest.fn().mockResolvedValue(true),
    openUrl: jest.fn().mockResolvedValue(true)
}

NativeModules.Platform = {
    OS: 'iOS'
}

jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
jest.mock('react-native/Libraries/Animated/src/animations/TimingAnimation');


const mockNavigation = () => {
    const mockedNavigate = jest.fn();
    const mockedAddListener = jest.fn();

    jest.mock('@react-navigation/native', () => ({ // @ts-ignore
        ...(jest.requireActual('@react-navigation/native')),
        useNavigation: () => ({
          navigate: mockedNavigate,
          addListener: mockedAddListener
        })
      }));
    
    return {mockedNavigate, mockedAddListener}
}

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

5 个答案: