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尚不支持）：通过像真实用户一样在设备/模拟器上测试您的应用来获得发布的信心。
自动同步：：通过监视应用程序中的异步操作来停止核心的脆弱性。
为CI量身定制：在诸如Travis之类的CI平台上执行E2E测试时不会感到悲伤。
独立于测试运行器：使用Mocha，AVA或您喜欢的任何其他JavaScript测试运行器。
可调试：：现代的async-await API允许异步测试中的断点按预期工作。

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

1 个答案:

关于