我刚刚将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();
});
});
答案 0 :(得分:5)
更新package.json并重新安装npm软件包对我来说很有效。
"jest": {
"preset": "react-native",
"transformIgnorePatterns": ["node_modules/(?!(jest-)?react-native|@?react-navigation)"],
"setupFiles": ["./node_modules/react-native-gesture-handler/jestSetup.js"]
}
答案 1 :(得分:4)
对我来说,仅添加 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
答案 2 :(得分:0)
这是因为您没有嘲笑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
答案 3 :(得分:0)
就我而言,遇到此问题时我正在使用react-native-cli
。我将其删除并安装了@react-native-community/cli
。它修复了所有问题!
答案 4 :(得分:0)
之所以发生这种情况,是因为您必须从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}
}