Update React Redux recipe to use custom render with wrapper (testing-library#424)

* Chore: Update react-redux recipe to use custom render with wrapper * Review fixes, removed the h1 and refactored the class component to a functional one * Added the export and updated the comment after kent's review

Author: MatanBobi

docs/example-react-redux.md

@@ -8,27 +8,25 @@ title: React Redux
 import React from 'react'
 import { connect } from 'react-redux'
 
-class Counter extends React.Component {
- increment = () => {
- this.props.dispatch({ type: 'INCREMENT' })
+const Counter = ({ dispatch, count }) => {
+ const increment = () => {
+ dispatch({ type: 'INCREMENT' })
  }
 
- decrement = () => {
- this.props.dispatch({ type: 'DECREMENT' })
+ const decrement = () => {
+ dispatch({ type: 'DECREMENT' })
  }
 
- render() {
- return (
+ return (
+ <div>
+ <h2>Counter</h2>
  <div>
- <h2>Counter</h2>
- <div>
- <button onClick={this.decrement}>-</button>
- <span data-testid="count-value">{this.props.count}</span>
- <button onClick={this.increment}>+</button>
- </div>
+ <button onClick={this.decrement}>-</button>
+ <span data-testid="count-value">{count}</span>
+ <button onClick={this.increment}>+</button>
  </div>
- )
- }
+ </div>
+ )
 }
 
 export default connect(state => ({ count: state.count }))(Counter)
@@ -58,58 +56,76 @@ export function reducer(state = initialState, action) {
 }
 ```
 
-Now here's what your test will look like:
+To test our connected component we can create a custom `render` function using
+the `wrapper` option as explained in the
+[setup](./react-testing-library/setup.md) page. 
+Our custom `render` function can look like this:
 
-```jsx
-// counter.test.js
+```js
+// test-utils.js
 import React from 'react'
+import { render as rtlRender } from '@testing-library/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'
-
 
-// this is a handy function that I normally make available for all my tests
-// that deal with connected components.
-// you can provide initialState for the entire store that the ui is rendered with
-function renderWithRedux(
+function render(
  ui,
- { initialState, store = createStore(reducer, initialState) } = {}
+ {
+ initialState,
+ store = createStore(reducer, initialState),
+ ...renderOptions
+ } = {}
 ) {
- return {
- ...render(<Provider store={store}>{ui}</Provider>),
- // adding `store` to the returned utilities to allow us
- // to reference it in our tests (just try to avoid using
- // this to test implementation details).
- store,
+ function Wrapper({ children }) {
+ return <Provider store={store}>{children}</Provider>
  }
+ return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
 }
 
+// re-export everything
+export * from '@testing-library/react'
+
+// override render method
+export { render }
+```
+
+```jsx
+// counter.test.js
+import React from 'react'
+import { createStore } from 'redux'
+import { Provider } from 'react-redux'
+import { } from '@testing-library/react'
+// We're using our own custom render function and not RTL's render
+// our custom utils also re-export everything from RTL
+// so we can import fireEvent and screen here as well
+import { render, fireEvent, screen } from './test-utils.js
+import '@testing-library/jest-dom/extend-expect'
+import { initialState, reducer } from './reducer.js'
+import Counter from './counter.js'
+
 test('can render with redux with defaults', () => {
- const { getByTestId, getByText } = renderWithRedux(<Counter />)
- fireEvent.click(getByText('+'))
- expect(getByTestId('count-value')).toHaveTextContent('1')
+ renderWithRedux(<Counter />)
+ fireEvent.click(screen.getByText('+'))
+ expect(screen.getByTestId('count-value')).toHaveTextContent('1')
 })
 
 test('can render with redux with custom initial state', () => {
- const { getByTestId, getByText } = renderWithRedux(<Counter />, {
+ renderWithRedux(<Counter />, {
  initialState: { count: 3 },
  })
- fireEvent.click(getByText('-'))
- expect(getByTestId('count-value')).toHaveTextContent('2')
+ fireEvent.click(screen.getByText('-'))
+ expect(screen.getByTestId('count-value')).toHaveTextContent('2')
 })
 
 test('can render with redux with custom store', () => {
  // this is a silly store that can never be changed
  const store = createStore(() => ({ count: 1000 }))
- const { getByTestId, getByText } = renderWithRedux(<Counter />, {
+ renderWithRedux(<Counter />, {
  store,
  })
- fireEvent.click(getByText('+'))
- expect(getByTestId('count-value')).toHaveTextContent('1000')
- fireEvent.click(getByText('-'))
- expect(getByTestId('count-value')).toHaveTextContent('1000')
+ fireEvent.click(screen.getByText('+'))
+ expect(screen.getByTestId('count-value')).toHaveTextContent('1000')
+ fireEvent.click(screen.getByText('-'))
+ expect(screen.getByTestId('count-value')).toHaveTextContent('1000')
 })
 ```