diff --git a/docs/recipes/WritingTests.md b/docs/recipes/WritingTests.md
index 73be4952cf..eae8464a89 100644
--- a/docs/recipes/WritingTests.md
+++ b/docs/recipes/WritingTests.md
@@ -256,9 +256,7 @@ describe('todos reducer', () => {
### Components
-A nice thing about React components is that they are usually small and only rely on their props. That makes them easy to test.
-
-First, we will install [React Testing Library](https://testing-library.com/docs/react-testing-library/intro). React Testing Library is a simple and complete React DOM testing utilities that encourage good testing practices. It uses react-dom's `render` function and `act` from react-dom/tests-utils.
+First, we will install [React Testing Library](https://testing-library.com/docs/react-testing-library/intro). React Testing Library is a simple and complete React DOM testing utility that encourage good testing practices. It uses react-dom's `render` function and `act` from react-dom/tests-utils.
```sh
npm install --save-dev @testing-library/react
@@ -270,92 +268,18 @@ If you are using jest as recommended above, we also recommend installing [jest-d
npm install --save-dev @testing-library/jest-dom
```
-To test the components, we `render` them into the DOM and pass stubbed callbacks as props, then we assert whether the callbacks were called when expected.
-
-#### Example
-
-```js
-import React from 'react'
-import PropTypes from 'prop-types'
-import TodoTextInput from './TodoTextInput'
-
-const Header = ({ addTodo }) => {
- const handleSave = text => {
- if (text.length !== 0) {
- addTodo(text)
- }
- }
-
- return (
-
- )
-}
-
-Header.propTypes = {
- addTodo: PropTypes.func.isRequired
-}
-
-export default Header
-```
-
-can be tested like:
-
-```js
-import React from 'react'
-import { render, fireEvent, screen } from '@testing-library/react'
-import Header from '../../components/Header'
-
-it('should not call addTodo if length of text is 0', () => {
- const mockAddTodo = jest.fn()
- render()
-
- fireEvent.change(screen.getByPlaceholderText(/what needs to be done/i), {
- target: { value: '' }
- })
-
- expect(mockAddTodo).toHaveBeenCalledTimes(0)
-})
-
-it('should call addTodo if length of text is greater than 0', () => {
- const mockAddTodo = jest.fn()
- render()
-
- fireEvent.change(screen.getByPlaceholderText(/what needs to be done/i), {
- target: { value: 'Use Redux' }
- })
-
- expect(mockAddTodo).toHaveBeenCalledTimes(1)
-})
-```
-
-### Connected Components
-
-If you use a library like [React Redux](https://github.com/reduxjs/react-redux), you might be using [higher-order components](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750) like [`connect()`](https://react-redux.js.org/api/connect). This lets you inject Redux state into a regular React component.
-
Consider the following `App` component:
```js
-import { connect } from 'react-redux'
-
-const App = props => {
- return
{props.user}
-}
+import { useSelector } from 'react-redux'
-const mapStateToProps = state => {
- return state
+export default function App() {
+ const user = useSelector(state => state.user)
+ return {user}
}
-
-export default connect(mapStateToProps)(App)
```
-To test it, we can use the `wrapper` option in React Testing Library's `render` function and export our own `render` function as explained in React Testing Library's [setup docs](https://testing-library.com/docs/react-testing-library/setup).
+To test the component, we `render` it into the DOM and pass stubbed callbacks as props, then we assert whether the callbacks were called when expected. We can use the `wrapper` option in the `render` function and export our own `render` function as explained in React Testing Library's [setup docs](https://testing-library.com/docs/react-testing-library/setup).
Our `render` function can look like this:
@@ -398,7 +322,7 @@ import React from 'react'
import { render, fireEvent, screen } from '../../test-utils'
import App from '../../containers/App'
-it('Renders the connected app with initialState', () => {
+it('Renders the app with initialState', () => {
render(, { initialState: { user: 'Redux User' } })
expect(screen.getByText(/redux user/i)).toBeInTheDocument()