npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mloureiro/babel-plugin-react-native-testid

v0.3.0

Published

Babel plugin to handle testID on both Android and iOS platforms

Downloads

22

Readme

React Native testID Babel Plugin

CI Status

What it does:

This plugin transform testID JSX attributes into accessibility properties so that Android can be found on black box end-to-end tooling like Appium.

Why is it needed:

On Android for the application elements to be targetable/found it needs to use the resourceId, we assumed React Native would convert testID to resourceId, unfortunately it didn't. With a quick search, you'll find a few dozens of closed tickets on this subject.

To achieve this we could do the same approach as react-native-testid, but this meant that the developer is responsible to remember to use this tool, plus it means changing the code every where with this change.

Another possibility would be to wrap all React Native components with this converter (testID to accessibility on Android) and make a proxy module with them. This has a similar flaw like the previous idea, the developer must remember to import the React Native components from our custom module.

This solution (current plugin) allow us developers to code as before, completely oblivious of these testID differences between Android and iOS.

Background story:

We used Detox to test our app from an end-to-end perspective. Detox takes the gray box approach, which means the package as to be installed directly onto the app so that it can work.

Besides having some challenges with Detox itself and we preferring the black box approach, the main flaw for us is that Detox (currently) does not support to run tests on real devices. After some investigation we found Appium, and here is where the reason for this plugin pop'ed.

Install

With NPM

$ npm install --save-dev @mloureiro/babel-plugin-react-native-testid

With Yarn

$ yarn add --dev @mloureiro/babel-plugin-react-native-testid

Usage

Add the plugin to your babel configuration

For example in .babelrc or babel.config.json it is:

{
  "plugins": ["@mloureiro/babel-plugin-react-native-testid"]
}

Note: to improve the code use this configuration only for development builds, to improve even more use babel-plugin-remove-test-ids, remember to set the remove plugin to use the attribute testID, check their documentation