| id | title |
|---|---|
example-react-context | React Context |
importReactfrom'react'import{render,screen}from'@testing-library/react'import'@testing-library/jest-dom'import{NameContext,NameProvider,NameConsumer}from'../react-context'/** * Test default values by rendering a context consumer without a * matching provider */test('NameConsumer shows default value',()=>{render(<NameConsumer/>)expect(screen.getByText(/^MyNameIs:/)).toHaveTextContent('My Name Is: Unknown',)})/** * 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 */constcustomRender=(ui,{providerProps, ...renderOptions})=>{returnrender(<NameContext.Provider{...providerProps}>{ui}</NameContext.Provider>,renderOptions,)}test('NameConsumer shows value from provider',()=>{constproviderProps={value: 'C3PO',}customRender(<NameConsumer/>,{providerProps})expect(screen.getByText(/^MyNameIs:/)).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',()=>{constproviderProps={first: 'Boba',last: 'Fett',}customRender(<NameContext.Consumer>{value=><span>Received: {value}</span>}</NameContext.Consumer>,{providerProps},)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',()=>{constwrapper=({children})=>(<NameProviderfirst="Leia"last="Organa">{children}</NameProvider>)render(<NameConsumer/>,{wrapper})expect(screen.getByText(/^MyNameIs:/).textContent).toBe('My Name Is: Leia Organa',)})