当我用React-Native
测试库测试包含TouchableOpacity
的组件时,第一次渲染是可以的,第二次测试套件测试总是失败。
如果我用TouchableWithoutFeedback
替换TouchableOpacity
,渲染会正常。其他的动画Touchable's
也会失败。
被测组件
import { TouchableOpacity, Text } from 'react-native';
const TestedComponent = () => (
<TouchableOpacity testID="tested-component">
<Text>Button</Text>
</TouchableOpacity>
);
字符串
测试(两个相同)
describe('TestedComponent', () => {
test('should render TestedComponent', () => {
render(<TestedComponent />);
expect(screen.getByTestId('tested-component')).toBeVisible();
});
test('should render TestedComponent', () => {
render(<TestedComponent />);
expect(screen.getByTestId('tested-component')).toBeVisible();
});
});
型
第一个通过第二个失败。当我改变他们的顺序-同样的情况发生
错误我得到
console.error
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
16 |
17 | test('should render TestedComponent', () => {
> 18 | render(<TestedComponent />, {
| ^
19 | createNodeMock: () => {},
20 | });
21 |
型
再来一杯
The above error occurred in the <ForwardRef> component:
at /Users/tetyana/Documents/UWRead/Codebase/uwr-mobile/node_modules/react-native/Libraries/Animated/createAnimatedComponent.js:36:57
at TouchableOpacity (/Users/tetyana/Documents/UWRead/Codebase/uwr-mobile/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js:132:23)
at TouchableOpacity
at TestedComponent
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
16 |
17 | test('should render TestedComponent', () => {
> 18 | render(<TestedComponent />, {
| ^
19 | createNodeMock: () => {},
20 | });
21 |
型
再来一杯
● TestedComponent › should render TestedComponent
TypeError: Cannot read properties of null (reading 'useReducer')
16 |
17 | test('should render TestedComponent', () => {
> 18 | render(<TestedComponent />, {
| ^
19 | createNodeMock: () => {},
20 | });
21 |
型
我尝试了不同的组件,以及浏览React
,React-Native
和测试库文档,做不同类型的清理,但没有结果。
有人能帮帮忙吗?
1条答案
按热度按时间eqqqjvef1#
我找到了罪魁祸首。我让setupTests.js在一个块的地方运行
字符串
它导致了失败。