Enhance react examples (testing-library#318)

Use extend-expect to improve the example. Additionally, `@testing-library-react` was imported in the wrong file.

Author: HendrikRoehm

docs/example-react-redux.md

@@ -66,6 +66,7 @@ import React from 'react'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
 import { initialState, reducer } from './reducer.js'
 import Counter from './counter.js'
 
@@ -89,15 +90,15 @@ function renderWithRedux(
 test('can render with redux with defaults', () => {
  const { getByTestId, getByText } = renderWithRedux(<Counter />)
  fireEvent.click(getByText('+'))
- expect(getByTestId('count-value').textContent).toBe('1')
+ expect(getByTestId('count-value')).toHaveTextContent('1')
 })
 
 test('can render with redux with custom initial state', () => {
  const { getByTestId, getByText } = renderWithRedux(<Counter />, {
  initialState: { count: 3 },
  })
  fireEvent.click(getByText('-'))
- expect(getByTestId('count-value').textContent).toBe('2')
+ expect(getByTestId('count-value')).toHaveTextContent('2')
 })
 
 test('can render with redux with custom store', () => {
@@ -107,8 +108,8 @@ test('can render with redux with custom store', () => {
  store,
  })
  fireEvent.click(getByText('+'))
- expect(getByTestId('count-value').textContent).toBe('1000')
+ expect(getByTestId('count-value')).toHaveTextContent('1000')
  fireEvent.click(getByText('-'))
- expect(getByTestId('count-value').textContent).toBe('1000')
+ expect(getByTestId('count-value')).toHaveTextContent('1000')
 })
 ```

docs/example-react-router.md

@@ -8,7 +8,6 @@ title: React Router
 import React from 'react'
 import { withRouter } from 'react-router'
 import { Link, Route, Router, Switch } from 'react-router-dom'
-import { render, fireEvent } from '@testing-library/react'
 
 const About = () => <div>You are on the about page</div>
 const Home = () => <div>You are home</div>
@@ -38,6 +37,8 @@ function App() {
 // app.test.js
 import { Router } from 'react-router-dom'
 import { createMemoryHistory } from 'history'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
 
 test('full app rendering/navigating', () => {
  const history = createMemoryHistory()
@@ -76,7 +77,7 @@ test('rendering a component that uses withRouter', () => {
  <LocationDisplay />
  </Router>
  )
- expect(getByTestId('location-display').textContent).toBe(route)
+ expect(getByTestId('location-display')).toHaveTextContent(route)
 })
 ```
 
@@ -129,7 +130,7 @@ test('landing on a bad page', () => {
 test('rendering a component that uses withRouter', () => {
  const route = '/some-route'
  const { getByTestId } = renderWithRouter(<LocationDisplay />, { route })
- expect(getByTestId('location-display').textContent).toBe(route)
+ expect(getByTestId('location-display')).toHaveTextContent(route)
 })
 ```