Chore/update react context example (#581)

Author: ljosberinn

docs/example-react-context.md

@@ -5,7 +5,7 @@ title: React Context
 
 ```jsx
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import { NameContext, NameProvider, NameConsumer } from '../react-context'
 
@@ -14,50 +14,65 @@ import { NameContext, NameProvider, NameConsumer } from '../react-context'
  * matching provider
  */
 test('NameConsumer shows default value', () => {
- const { getByText } = render(<NameConsumer />)
- expect(getByText(/^My Name Is:/)).toHaveTextContent('My Name Is: Unknown')
+ render(<NameConsumer />)
+ expect(screen.getByText(/^My Name Is:/)).toHaveTextContent(
+ 'My Name Is: Unknown'
+ )
 })
 
 /**
- * To test a component tree that uses a context consumer but not the provider,
- * wrap the tree with a matching provider
+ * A custom render to setup providers. Extends regular
+ * render options with `providerProps` to allow injecting
+ * different scenarios to test with.
+ *
+ * @see https://testing-library.com/docs/react-testing-library/setup#custom-render
  */
-test('NameConsumer shows value from provider', () => {
- const tree = (
- <NameContext.Provider value="C3P0">
- <NameConsumer />
- </NameContext.Provider>
+const customRender = (ui, { providerProps, ...renderOptions }) => {
+ return render(
+ <NameContext.Provider {...providerProps}>{ui}</NameContext.Provider>,
+ renderOptions
  )
- const { getByText } = render(tree)
- expect(getByText(/^My Name Is:/)).toHaveTextContent('My Name Is: C3P0')
+}
+
+test('NameConsumer shows value from provider', () => {
+ const providerProps = {
+ value: 'C3PO',
+ }
+ customRender(<NameConsumer />, { providerProps })
+ expect(screen.getByText(/^My Name Is:/)).toHaveTextContent('My Name Is: C3P0')
 })
 
 /**
  * To test a component that provides a context value, render a matching
  * consumer as the child
  */
 test('NameProvider composes full name from first, last', () => {
- const tree = (
- <NameProvider first="Boba" last="Fett">
- <NameContext.Consumer>
- {value => <span>Received: {value}</span>}
- </NameContext.Consumer>
- </NameProvider>
+ const providerProps = {
+ first: 'Boba',
+ last: 'Fett',
+ }
+ customRender(
+ <NameContext.Consumer>
+ {(value) => <span>Received: {value}</span>}
+ </NameContext.Consumer>,
+ { providerProps }
  )
- const { getByText } = render(tree)
- expect(getByText(/^Received:/).textContent).toBe('Received: Boba Fett')
+ expect(screen.getByText(/^Received:/).textContent).toBe('Received: Boba Fett')
 })
 
 /**
  * A tree containing both a providers and consumer can be rendered normally
  */
 test('NameProvider/Consumer shows name of character', () => {
- const tree = (
+ const wrapper = ({ children }) => (
  <NameProvider first="Leia" last="Organa">
- <NameConsumer />
+ {children}
  </NameProvider>
  )
- const { getByText } = render(tree)
- expect(getByText(/^My Name Is:/).textContent).toBe('My Name Is: Leia Organa')
+
+ render(<NameConsumer />, { wrapper })
+ expect(screen.getByText(/^My Name Is:/).textContent).toBe(
+ 'My Name Is: Leia Organa'
+ )
 })
 ```