web-dev-qa-db-fra.com

Jest Mock Structure Contexte

J'ai besoin d'aide pour comprendre comment on peut tester une application à l'aide de React _ Context.

Voici mon exemple de configuration.

context.js

import React from 'react'

export const AppContext = React.createContext()

app.js

import React from 'react'

import MyComponent from './MyComponent'
import {AppContext} from './context'

const App extends React.Component {

  state = {
    items: []
  }

  handleItemAdd = newItem => {
    const {items} = this.state
    items.Push(newItem)
    this.setState(items)
  }

  render() {
    return (
      <AppContext.Provider value={{
        addItem: this.handleItemAdd
      }}>
        <MyComponent />
      </AppContext.Provider>
    )
  }
}

export default App

myComponent.js

import React from 'react'

import {AppContext} from './context'

const MyComponent extends React.Component {    
  render() {
    return (
      <AppContext.Consumer>
        {addItem => 
          <button onClick={() => addItem('new item')}>
            Click me
          </button>
        }
      </AppContext.Consumer>
    )
  }
}

export default MyComponent

Ceci est un exemple simplifié. Imaginez qu'il y ait plus de couches entre App et MyComponent, d'où l'utilisation de React _ Context.

Et voici mon fichier de test pour MyComponent.

mycomponent.test.js

import React from 'react'
import {render, fireEvent} from 'react-testing-library'

test('component handles button click', () => {
  const {getByText} = render(
    <MyComponent />
  )
  const button = getByText('Click me')
  fireEvent.click(button)
  expect...?
}

La chose est, AppContext.Consumer fait partie de la mise en œuvre de MyComponent, donc dans ce test, je n'ai pas accès direct à celui-ci. Comment je me moque AppContext.Consumer Donc, je suis en mesure de vérifier que cliquer sur un bouton tire une fonction de fonction?

Je sais que dans la théorie, je peux tester cela en rendant MyComponent dans mon App, mais je veux écrire un test d'unité pour MyComponent uniquement.

reactjsunit-testingjestjsreact-contextreact-testing-library
25
artooras

Je souhaite ajouter un exemple de test complet en utilisant la solution à partir de @giorgio. Nous testons ici que MyComponent est rendu et que son bouton sera cliqué une fois.

mycomponent.test.js

import React from 'react'
import { render, fireEvent } from 'react-testing-library'

test('component handles button click', () => {
  const addItem = jest.fn()
  render(
    <AppContext.Provider value={{ addItem }}>
      <MyComponent />
    </AppContext.Provider>
  )
  fireEvent.click(screen.getByText(/click me/))
  expect(addItem).toHaveBeenCalledTimes(1)
}
0
fjplaurr