remove data-testid and add labels

Author: Kent C. Dodds

src/__tests__/dependency-injection.js

@@ -6,7 +6,7 @@ test('loads greetings on click', async () => {
  const mockLoadGreeting = jest.fn(subject =>
  Promise.resolve({data: {greeting: `Hi ${subject}`}}),
  )
- const {getByLabelText, getByText, getByTestId} = render(
+ const {getByLabelText, getByText} = render(
  <GreetingLoader loadGreeting={mockLoadGreeting} />,
  )
  const nameInput = getByLabelText(/name/i)
@@ -16,6 +16,6 @@ test('loads greetings on click', async () => {
  expect(mockLoadGreeting).toHaveBeenCalledWith('Mary')
  expect(mockLoadGreeting).toHaveBeenCalledTimes(1)
  await waitForDomChange(() =>
- expect(getByTestId('greeting')).toHaveTextContent(`Hi Mary`),
+ expect(getByLabelText('greeting')).toHaveTextContent(`Hi Mary`),
  )
 })

src/__tests__/http-jest-mock.js

@@ -12,14 +12,14 @@ jest.mock('../api', () => {
 })
 
 test('loads greetings on click', async () => {
- const {getByLabelText, getByText, getByTestId} = render(<GreetingLoader />)
+ const {getByLabelText, getByText} = render(<GreetingLoader />)
  const nameInput = getByLabelText(/name/i)
  const loadButton = getByText(/load/i)
  nameInput.value = 'Mary'
  fireEvent.click(loadButton)
  expect(mockLoadGreeting).toHaveBeenCalledWith('Mary')
  expect(mockLoadGreeting).toHaveBeenCalledTimes(1)
  await waitForDomChange(() =>
- expect(getByTestId('greeting')).toHaveTextContent(`Hi Mary`),
+ expect(getByLabelText('greeting')).toHaveTextContent(`Hi Mary`),
  )
 })

src/__tests__/redux-01.js

@@ -6,11 +6,11 @@ import {reducer, Counter} from '../redux-app'
 
 test('can render with redux with defaults', () => {
  const store = createStore(reducer)
- const {getByTestId, getByText} = render(
+ const {getByLabelText, getByText} = render(
  <Provider store={store}>
  <Counter />
  </Provider>,
  )
  fireEvent.click(getByText('+'))
- expect(getByTestId('count-value')).toHaveTextContent('1')
+ expect(getByLabelText(/count/i)).toHaveTextContent('1')
 })

src/__tests__/redux-02.js

@@ -6,22 +6,22 @@ import {reducer, Counter} from '../redux-app'
 
 test('can render with redux with defaults', () => {
  const store = createStore(reducer)
- const {getByTestId, getByText} = render(
+ const {getByLabelText, getByText} = render(
  <Provider store={store}>
  <Counter />
  </Provider>,
  )
  fireEvent.click(getByText('+'))
- expect(getByTestId('count-value')).toHaveTextContent('1')
+ expect(getByLabelText(/count/i)).toHaveTextContent('1')
 })
 
 test('can render with redux with custom initial state', () => {
  const store = createStore(reducer, {count: 3})
- const {getByTestId, getByText} = render(
+ const {getByLabelText, getByText} = render(
  <Provider store={store}>
  <Counter />
  </Provider>,
  )
  fireEvent.click(getByText('-'))
- expect(getByTestId('count-value')).toHaveTextContent('2')
+ expect(getByLabelText(/count/i)).toHaveTextContent('2')
 })

src/__tests__/redux-03.js

@@ -31,15 +31,15 @@ function render(
 }
 
 test('can increment the value', () => {
- const {getByTestId, getByText} = render(<Counter />)
+ const {getByLabelText, getByText} = render(<Counter />)
  fireEvent.click(getByText('+'))
- expect(getByTestId('count-value')).toHaveTextContent('1')
+ expect(getByLabelText(/count/i)).toHaveTextContent('1')
 })
 
 test('can decrement the value', () => {
- const {getByTestId, getByText} = render(<Counter />, {
+ const {getByLabelText, getByText} = render(<Counter />, {
  initialState: {count: 3},
  })
  fireEvent.click(getByText('-'))
- expect(getByTestId('count-value')).toHaveTextContent('2')
+ expect(getByLabelText(/count/i)).toHaveTextContent('2')
 })

src/greeting-loader-01-mocking.js

@@ -13,7 +13,7 @@ function GreetingLoader() {
  <label htmlFor="name">Name</label>
  <input id="name" />
  <button type="submit">Load Greeting</button>
- <div data-testid="greeting">{greeting}</div>
+ <div aria-label="greeting">{greeting}</div>
  </form>
  )
 }

src/greeting-loader-02-dependency-injection.js

@@ -13,7 +13,7 @@ function GreetingLoader({loadGreeting = api.loadGreeting}) {
  <label htmlFor="name">Name</label>
  <input id="name" />
  <button type="submit">Load Greeting</button>
- <div data-testid="greeting">{greeting}</div>
+ <div aria-label="greeting">{greeting}</div>
  </form>
  )
 }

src/redux-app.js

@@ -13,7 +13,7 @@ function Counter() {
  <h2>Counter</h2>
  <div>
  <button onClick={decrement}>-</button>
- <span data-testid="count-value">{count}</span>
+ <span aria-label="count">{count}</span>
  <button onClick={increment}>+</button>
  </div>
  </div>