排毒测试即使添加了ID也无法识别视图

我看了一眼申请表,就可以让它工作了。我在devdependencies中设置了以下内容。

  "devDependencies": {
    ...
    "jest": "23.2.0",
    "detox": "8.0.0"
    ...
  },

我还添加了

"detox": {
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/BoomApp.app",
        "build": "xcodebuild -project ios/BoomApp.xcodeproj -scheme BoomApp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone 7"
      }
    },

我跑了 detox init -r jest

然后我可以让它识别特定屏幕的呈现时间,我通过将testid添加到scrollview loginscreenblur.js(第23行)来实现这一点。

<AppWrapper>
    <ScrollView contentContainerStyle={{flex: 1}} testID={'login_screen'}>
    ....
    </ScrollView>
</AppWrapper>

A然后进入 e2e/firstTest.spec.js 我把测试换成了

  it('should have loginScreen', async () => {
    await expect(element(by.id('login_screen'))).toBeVisible();
  });

这是我运行后的控制台响应 detox build && detox test

node_modules/.bin/jest e2e --config=e2e/config.json --maxWorkers=1 --testNamePattern='^((?!:android:).)*$'
 server listening on localhost:64579...
 : Searching for device matching iPhone 7...
 : Uninstalling org.reactjs.native.example.BoomApp...
 : org.reactjs.native.example.BoomApp uninstalled
 : Installing /Users/work/Downloads/react-native-ui-kitten-demo-app-master/ios/build/Build/Products/Debug-iphonesimulator/BoomApp.app...
 : /Users/work/Downloads/react-native-ui-kitten-demo-app-master/ios/build/Build/Products/Debug-iphonesimulator/BoomApp.app installed
 : Terminating org.reactjs.native.example.BoomApp...
 : org.reactjs.native.example.BoomApp terminated
 : Launching org.reactjs.native.example.BoomApp...
7: org.reactjs.native.example.BoomApp launched. The stdout and stderr logs were recreated, you can watch them with:
        tail -F /Users/work/Library/Developer/CoreSimulator/Devices/AF406169-5CF3-4480-9D00-8F934C420043/data/tmp/detox.last_launch_app_log.{out,err}
 PASS  e2e/firstTest.spec.js (7.935s)
  Example
    ✓ should have loginScreen (1499ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.87s, estimated 9s
Ran all test suites matching /e2e/i with tests matching "^((?!:android:).)*$".

应用程序似乎默认启动loginscreenblur,所以首先测试它是有意义的,而不是loginscreenmaterial。

我注意到的一件事是应用程序使用 RKTextInput 和 RkButton ,这些不是本机组件,而是本机组件的包装器。这意味着您需要将testid传递给您想要测试的本机组件。我不确定是否 react-native-ui-kitten 支持辅助功能标签,因此如果希望自动输入文本和按钮点击,可能还有更多的工作要做。

向自定义组件添加testid

参见步骤3 https://github.com/wix/detox/blob/master/docs/Introduction.WritingFirstTest.md

注意,不是所有的反应组件都支持这个道具。不过,react native中的大多数内置本机组件(如视图、文本、文本输入、开关、滚动视图)都支持。如果创建自己的复合组件,则必须手动将此属性传播到正确的本机组件。

这里给出了向自定义组件添加testid的更详细的解释。 https://github.com/wix/detox/blob/master/docs/Troubleshooting.RunningTests.md#cant-find-my-component-even-though-i-added-testid-to-its-props

简单地说,您应该实现定制组件,如下所示。

自定义组件

export class MyCompositeComponent extends Component {
  render() {
    return (
      <TouchableOpacity testID={this.props.testID}>
        <View>
          <Text>Something something</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

使用自定义组件

那么你应该这样使用它。

render() {
  return <MyCompositeComponent testID='MyUniqueId123' />;
}

搜索层次结构

如果您已经完成了上述操作,并且您确信您的项具有正确的测试并且测试仍然失败,那么您可以在视图层次结构中搜索它。 https://github.com/wix/detox/blob/master/docs/Troubleshooting.RunningTests.md#debug-view-hierarchy

我不会完全重复上面的文章,但步骤是

1. 在模拟器中启动可调试的应用程序(而不是发布版本)
2. 打开xcode
3. 将Xcode附加到应用程序进程
4. 按“调试视图层次结构”按钮
5. 这将打开层次结构查看器,并显示应用程序本机视图层次结构的细分。在这里,您可以浏览视图
6. react本机测试在本机视图层次结构中表示为可访问性标识符

使用accessibletyLabel向视图元素添加ID: https://facebook.github.io/react-native/docs/accessibility.html

事实上,这个可访问性标签将是您的测试,在您的测试工具中可以识别:

<TouchableOpacity
  accessible={true}
  accessibilityLabel={'Tap me!'}
  onPress={this._onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableOpacity>