Jest.js TouchableOpacity在使用React Native测试库进行第二次渲染时失败

edqdpe6u  于 12个月前  发布在  Jest
关注(0)|答案(1)|浏览(130)

当我用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 |


我尝试了不同的组件,以及浏览ReactReact-Native和测试库文档,做不同类型的清理,但没有结果。
有人能帮帮忙吗?

eqqqjvef

eqqqjvef1#

我找到了罪魁祸首。我让setupTests.js在一个块的地方运行

afterEach(() => {
  jest.resetModules();
});

字符串
它导致了失败。

相关问题