diff --git a/docs/example-react-redux.md b/docs/example-react-redux.md index bd93e6caf..a0a01ca5f 100644 --- a/docs/example-react-redux.md +++ b/docs/example-react-redux.md @@ -3,127 +3,5 @@ id: example-react-redux title: React Redux --- -```jsx -// counter.js -import React from 'react' -import { connect } from 'react-redux' - -const Counter = ({ dispatch, count }) => { - const increment = () => { - dispatch({ type: 'INCREMENT' }) - } - - const decrement = () => { - dispatch({ type: 'DECREMENT' }) - } - - return ( -
-

Counter

-
- - {count} - -
-
- ) -} - -export default connect(state => ({ count: state.count }))(Counter) -``` - -For this example, we'll have a simple reducer that tracks and updates `count`: - -```js -// reducer.js -export const initialState = { - count: 0, -} - -export function reducer(state = initialState, action) { - switch (action.type) { - case 'INCREMENT': - return { - count: state.count + 1, - } - case 'DECREMENT': - return { - count: state.count - 1, - } - default: - return state - } -} -``` - -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: - -```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 { initialState as reducerInitialState, reducer } from './reducer' - -function render( - ui, - { - initialState = reducerInitialState, - store = createStore(reducer, initialState), - ...renderOptions - } = {} -) { - function Wrapper({ children }) { - return {children} - } - 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' -// 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' -import '@testing-library/jest-dom/extend-expect' -import Counter from './counter' - -test('can render with redux with defaults', () => { - render() - fireEvent.click(screen.getByText('+')) - expect(screen.getByTestId('count-value')).toHaveTextContent('1') -}) - -test('can render with redux with custom initial state', () => { - render(, { - initialState: { count: 3 }, - }) - 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 })) - render(, { - store, - }) - fireEvent.click(screen.getByText('+')) - expect(screen.getByTestId('count-value')).toHaveTextContent('1000') - fireEvent.click(screen.getByText('-')) - expect(screen.getByTestId('count-value')).toHaveTextContent('1000') -}) -``` +Moved to +[Writing Tests | Redux](https://redux.js.org/recipes/writing-tests#connected-components) diff --git a/netlify.toml b/netlify.toml index 1db9c9f94..9fdeaa0ff 100644 --- a/netlify.toml +++ b/netlify.toml @@ -138,3 +138,10 @@ to = "https://testing-library.com/docs/nightwatch-testing-library/intro" status = 301 force = true + +# React Redux recipe to Redux's recipe +[[redirects]] + from = "https://testing-library.com/docs/example-react-redux" + to = "https://redux.js.org/recipes/writing-tests#connected-components" + status = 301 + force = true