Шутка издеваться реагировать контекст - PullRequest
Новая
       22

Шутка издеваться реагировать контекст

0 голосов
/ 21 января 2019

Мне нужна помощь, чтобы понять, как можно протестировать приложение, используя React Context.

Вот мой пример настройки.

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

Это упрощенный пример.Представьте, что между App и MyComponent существует больше слоев, поэтому используется React Context.

А вот мой тестовый файл для 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...?
}

Дело в том, что AppContext.Consumer является частью реализации MyComponent, поэтому в этом тесте у меня нет прямого доступа к нему.Как мне высмеивать AppContext.Consumer, чтобы я действительно мог проверить, что нажатие кнопки запускает вызов функции?

Я знаю, что теоретически я могу проверить это, отобразив MyComponent в моем App, ноЯ хочу написать модульный тест только для MyComponent.

1 Ответ

0 голосов
/ 22 января 2019

Вы просто визуализируете контекст с вашим компонентом. 

const addItem = jest.fn()
render(
  <AppContext.Provider value={{ addItem }}>
    <MyComponent />
  </ApppContext.Provider>
)

См. Контекст для насмешки с библиотекой реагирования-тестирования

...