농담 모의 반응 컨텍스트

농담 모의 반응 컨텍스트

응용 프로그램을 테스트하는 방법에 대한 도움이 필요합니다.React Context.

여기 제 샘플 설정입니다.

context.context.context.displaces

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

My Component.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.

My Component.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오직.

콘텍스트를 컴포넌트로 렌더링하기만 하면 됩니다.

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

React-testing-Library를 사용한 컨텍스트 조롱을 참조하십시오.

@Giorgio의 솔루션을 사용하여 완전한 테스트 예를 추가하고 싶습니다.여기서는 My Component가 렌더링되고 해당 버튼이 한 번 클릭되는 것을 테스트합니다.

My Component.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)
}

언급URL : https://stackoverflow.com/questions/54292298/jest-mock-react-context