fix(sel): match react native web's testID prop

Closes #1

Author: Kent C. Dodds

README.md

@@ -44,7 +44,7 @@ components. It provides light utility functions on top of `react-dom` and
   * [`Simulate`](#simulate)
   * [`flushPromises`](#flushpromises)
   * [`render`](#render)
-* [More on `data-test` ids](#more-on-data-test-ids)
+* [More on `data-testid`s](#more-on-data-testids)
 * [FAQ](#faq)
 * [Other Solutions](#other-solutions)
 * [Guiding Principles](#guiding-principles)
@@ -128,16 +128,16 @@ The containing DOM node of your rendered React Element (rendered using
 
 #### `queryByTestId`
 
-A shortcut to `` container.querySelector(`[data-test="${yourId}"]`) ``. Read
-more about data-test ids below.
+A shortcut to `` container.querySelector(`[data-testid="${yourId}"]`) ``. Read
+more about `data-testid`s below.
 
 ```javascript
 const usernameInputElement = queryByTestId('username-input')
 ```
 
-## More on `data-test` ids
+## More on `data-testid`s
 
-The `queryByTestId` utility is referring to the practice of using `data-test`
+The `queryByTestId` utility is referring to the practice of using `data-testid`
 attributes to identify individual elements in your rendered component. This is
 one of the practices this library is intended to encourage.
 
@@ -216,18 +216,18 @@ something more
 Learn more about how Jest mocks work from my blog post:
 ["But really, what is a JavaScript mock?"](https://blog.kentcdodds.com/but-really-what-is-a-javascript-mock-10d060966f7d)
 
-**I don't want to use `data-test` attributes for everything. Do I have to?**
+**I don't want to use `data-testid` attributes for everything. Do I have to?**
 
-Definitely not. That said, a common reason people don't like the `data-test`
+Definitely not. That said, a common reason people don't like the `data-testid`
 attribute is they're concerned about shipping that to production. I'd suggest
 that you probably want some simple E2E tests that run in production on occasion
-to make certain that things are working smoothly. In that case the `data-test`
+to make certain that things are working smoothly. In that case the `data-testid`
 attributes will be very useful. Even if you don't run these in production, you
 may want to run some E2E tests that run on the same code you're about to ship to
-production. In that case, the `data-test` attributes will be valuable there as
+production. In that case, the `data-testid` attributes will be valuable there as
 well.
 
-All that said, if you really don't want to ship `data-test` attributes, then you
+All that said, if you really don't want to ship `data-testid` attributes, then you
 can use
 [this simple babel plugin](https://www.npmjs.com/package/babel-plugin-react-remove-properties)
 to remove them.

src/__tests__/__snapshots__/fetch.js.snap

@@ -3,12 +3,12 @@
 exports[`Fetch makes an API call and displays the greeting when load-greeting is clicked 1`] = `
 <div>
   <button
-    data-test="load-greeting"
+    data-testid="load-greeting"
   >
     Fetch
   </button>
   <span
-    data-test="greeting-text"
+    data-testid="greeting-text"
   >
     hello there
   </span>

src/__tests__/fetch.js

@@ -20,10 +20,10 @@ class Fetch extends React.Component {
     const {data} = this.state
     return (
       <div>
-        <button onClick={this.fetch} data-test="load-greeting">
+        <button onClick={this.fetch} data-testid="load-greeting">
           Fetch
         </button>
-        {data ? <span data-test="greeting-text">{data.greeting}</span> : null}
+        {data ? <span data-testid="greeting-text">{data.greeting}</span> : null}
       </div>
     )
   }

src/__tests__/mock.react-transition-group.js

@@ -18,11 +18,11 @@ class HiddenMessage extends React.Component {
   render() {
     return (
       <div>
-        <button data-test="toggle-message" onClick={this.toggle}>
+        <button data-testid="toggle-message" onClick={this.toggle}>
           Toggle
         </button>
         <Fade in={this.state.show}>
-          <div data-test="hidden-message">Hello world</div>
+          <div data-testid="hidden-message">Hello world</div>
         </Fade>
       </div>
     )

src/__tests__/number-display.js

@@ -8,8 +8,8 @@ class NumberDisplay extends React.Component {
   render() {
     return (
       <div>
-        <span data-test="number-display">{this.props.number}</span>
-        <span data-test="instance-id">{this.id}</span>
+        <span data-testid="number-display">{this.props.number}</span>
+        <span data-testid="instance-id">{this.id}</span>
       </div>
     )
   }

src/__tests__/shallow.react-transition-group.js

@@ -18,11 +18,11 @@ class HiddenMessage extends React.Component {
   render() {
     return (
       <div>
-        <button data-test="toggle-message" onClick={this.toggle}>
+        <button data-testid="toggle-message" onClick={this.toggle}>
           Toggle
         </button>
         <Fade in={this.state.show}>
-          <div data-test="hidden-message">Hello world</div>
+          <div data-testid="hidden-message">Hello world</div>
         </Fade>
       </div>
     )

src/index.js

@@ -3,7 +3,7 @@ import {Simulate} from 'react-dom/test-utils'
 
 // we may expose this eventually
 function sel(id) {
-  return `[data-test="${id}"]`
+  return `[data-testid="${id}"]`
 }
 
 // we may expose this eventually