Skip to content

Commit

Permalink
fix(sel): match react native web's testID prop
Browse files Browse the repository at this point in the history
Closes #1
  • Loading branch information
Kent C. Dodds committed Mar 19, 2018
1 parent 5c4659e commit 7cdc26d
Show file tree
Hide file tree
Showing 7 changed files with 21 additions and 21 deletions.
20 changes: 10 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/__snapshots__/fetch.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/fetch.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/mock.react-transition-group.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/number-display.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/shallow.react-transition-group.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
2 changes: 1 addition & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 7cdc26d

Please sign in to comment.