Detox：如何测试多行 TextInput

我正在尝试使用排毒来测试我的反应本机应用程序中的表单。

表单中的输入之一有multiline={true}.

我正在尝试运行以下测试：

const inputElement = element(by.id('input_multiline'));
await expect(inputElement).toBeVisible();
await inputElement.typeText('line1\n');
await inputElement.typeText('line2\n');
await inputElement.typeText('line3\n');

const submitElement = element(by.id('submit'));
await submitElement.toBeVisible();
await submitElement.tap();

此测试未能通过 75% 可见性标准，因为键盘隐藏了提交按钮。

通常对于 TextInput 来说multiline={false}你可以只附加\n到输入字符串自动移动到下一个阶段，但对于多行输入\n只是添加了一个新行。

我该怎么做才能通过这项排毒测试？

首先我们需要能够关闭 TextInput 的键盘multiline={true}.

为此，我们将使用react-native 的键盘模块。

import {Keyboard} from 'react-native'

现在用 TouchableWithoutFeedback 包裹您的表单并在按下时调用 Keyboard.dismiss() 。

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
  { /* your form goes here */ }
</TouchableWithoutFeedback>

现在修改您的排毒测试以关闭键盘。

const inputElement = element(by.id('input'));
await expect(inputElement).toBeVisible();
await inputElement.typeText('line1\n');
await inputElement.typeText('line2\n');
await inputElement.typeText('line3\n');
// click somewhere outside the input
await inputElement.tapAtPoint({x: 0, y: 1});

const submitElement = element(by.id('submit'));
await submitElement.toBeVisible();
await submitElement.tap();