Add annotations of our React components to the DOM in dev builds

[jimporter]

https://github.com/suprraz/babel-plugin-react-element-info

It should make it a lot easier to write integration tests for our UI! :)

[m8ttyB]

cc'ing @jrbenny35 for his thoughts on this. Are there any negative implications that you think of that might outweigh the benefits of using this solution?

[b4handjr]

I like this, and it should help quite a bit.

[m8ttyB]

I've forgotten, did we discuss this during the meeting? I'm beginning to seeing anecdotal usage of data-testid in other React projects as a convention for e2e tests to hook into.

[jimporter]

In the meeting, I think I just brought up how it'd be nice if there were a way to get the React component names into the DOM and that there was probably a tool to do it, but that if there were no tool we could do it manually.

This is one such tool, and it should be really easy to integrate into our build system.

[jimporter]

Ok, I tested it out, and this tool isn't quite what we need, but it can probably form a base for something that we could use. There are a couple problems:

1. Regular HTML elements get this annotation too, which overwrites the React component's annotation.
2. We often go through multiple layers of React components before we hit our first HTML element. How should we annotate that entire stack of React components?

[jimporter]

Another option is to manually annotate with a particular prop and then strip that prop from prod builds via babel-plugin-react-remove-properties. We'd still have to be a bit careful here due to issue (2) above, but it'd be easier overall.

As for why we'd strip it in prod, the main reason is for optimization purposes (same reason we minify our source in prod). This would be a smaller optimization than stripping auto-generated props, so it might not be worth it, but every little bit helps, especially since JSX compiles to some fairly verbose code.

[jimporter]

Here's a (possibly) better option: instead of trying to use a common attribute name to store this metadata, we could have a unique attribute name for every React component. For example, we'd end up with something like this:

<ul data-testid-all-items data-testid-item-list data-testid-scrolling-list>

Then it's easy to automatically inject these names via Babel.

[jimporter]

@m8ttyB Does the above sound usable for the integration tests? It should be pretty easy to whip up a Babel plugin that does that.

[m8ttyB]

@jimporter I can't find a fault with this. Does the extra information help you debug a problem once a bug is filed?