在React Native中使用钩子对功能组件进行单元测试的最佳实践是什么？

Question

我已经在ScrollView周围编写了一个简单的包装器组件，该组件根据所提供的可用高度来启用/禁用滚动：

import React, {useCallback, useEffect, useRef, useState} from 'react';
import {Keyboard, ScrollView} from 'react-native';
import {deviceHeight} from '../../../platform';

export default function ScrollingForm({
  availableHeight = deviceHeight,
  children,
}) {
  const [scrollEnabled, setScrollEnabled] = useState(true);
  const [formHeight, setFormHeight] = useState(0);
  const scrollingForm = useRef(null);

  const checkScrollViewEnabled = useCallback(() => {
    setScrollEnabled(formHeight > availableHeight);
  }, [availableHeight, formHeight]);

  const onFormLayout = async event => {
    await setFormHeight(event.nativeEvent.layout.height);
    checkScrollViewEnabled();
  };

  useEffect(() => {
    Keyboard.addListener('keyboardDidHide', checkScrollViewEnabled);

    // cleanup function
    return () => {
      Keyboard.removeListener('keyboardDidHide', checkScrollViewEnabled);
    };
  }, [checkScrollViewEnabled]);

  return (
    <ScrollView
      ref={scrollingForm}
      testID="scrollingForm"
      keyboardDismissMode="on-drag"
      keyboardShouldPersistTaps="handled"
      scrollEnabled={scrollEnabled}
      onLayout={onFormLayout}
      onKeyboardDidShow={() => setScrollEnabled(true)}>
      {children}
    </ScrollView>
  );
}

我需要为此组件编写单元测试。到目前为止，我有：

import React from 'react';
import {Keyboard} from 'react-native';
import {render} from 'react-native-testing-library';
import {Text} from '../..';
import ScrollingForm from './ScrollingForm';

describe('ScrollingForm', () => {
  Keyboard.addListener = jest.fn();
  Keyboard.removeListener = jest.fn();

  let renderer;
  describe('keyboard listener', () => {
    it('renders text with default props', () => {
      renderer = render(
        <ScrollingForm>
          <Text>Hello World!</Text>
        </ScrollingForm>,
      );
      expect(Keyboard.addListener).toHaveBeenCalled();
    });

    it('should call listener.remove on unmount', () => {
      renderer = render(
        <ScrollingForm>
          <Text>Goodbye World!</Text>
        </ScrollingForm>,
      );
      renderer.unmount();
      expect(Keyboard.removeListener).toHaveBeenCalled();
    });
  });
});

我还要确认在布局上，如果可用高度大于表单高度，则将scrollEnabled正确设置为false。我已经尝试过类似的事情：

it('sets scrollEnabled to false onFormLayout width 1000 height', () => {
  mockHeight = 1000;
  const {getByTestId} = render(
    <ScrollingForm availableHeight={500}>
      <Text>Hello World!</Text>
    </ScrollingForm>,
  );
  const scrollingForm = getByTestId('scrollingForm');

  fireEvent(scrollingForm, 'onLayout', {
    nativeEvent: {layout: {height: mockHeight}},
  });
  expect(scrollingForm.props.scrollEnabled).toBe(false);
});

Answer 1

您可以为此目的使用Detox

用于移动应用程序的灰盒端到端测试和自动化库。

您可以看到Example和Docs项目以获得最佳实践

关于

高速本地移动开发需要我们采用连续的集成工作流程，这意味着我们对手动质量检查的依赖必须大大降低。当您的移动应用程序在真实的设备/模拟器中运行时，Detox会对其进行测试，就像真实用户一样与之交互。

移动设备上自动测试最困难的部分是测试金字塔的尽头-E2E。 E2E测试的核心问题是脆弱性-测试通常不是确定性的。我们认为，解决脱皮问题的唯一方法是从黑盒测试过渡到灰盒测试。这就是排毒的作用。

• 跨平台：用JavaScript编写跨平台测试。当前支持iOS和Android。
• 在设备上运行（iOS上尚不支持）：像真实用户一样，通过在设备/模拟器上测试您的应用来放心发布。
• 自动同步：
通过监视应用程序中的异步操作，在核心处停止脆弱性。
• Made For CI：
在Travis等CI平台上执行E2E测试时不会感到悲伤。
• 独立于测试运行程序：
使用Mocha，AVA或您喜欢的任何其他JavaScript测试运行程序。
• Debuggable：
现代的async-await API允许异步测试中的断点按预期工作。