如何在Jest/Enzyme中模擬React背景關系？

我正在嘗試學習如何使用 Jest/Enzyme，并且堅持為我的單元測驗提供背景關系調度功能。第一個狀態背景關系似乎有效，但調度函式的第二個背景關系無效。我知道我可以通過背景關系將第二個引數傳遞給淺層函式，但我也無法讓它以這種方式作業。

錯誤：

 FAIL  src/components/SearchBar.test.js
  SearchBar.jsx
    × should show search bar (4 ms)

  ● SearchBar.jsx ? should show search bar

    TypeError: Cannot destructure property 'asyncReducer' of '(0 , _Provider.useCocktailDispatch)(...)' as it is undefined.

       7 | const SearchBar = () => {
       8 |     const state = useCocktailState()
    >  9 |     const { asyncReducer, dispatch } = useCocktailDispatch()
         |             ^
      10 |     const [modalShow, setModalShow] = useState(false)
      11 |     const [searchTerm, setSearchTerm] = useState(state.searchTerm)
      12 |

      at SearchBar (src/components/SearchBar.jsx:9:13)
      at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:829:32)
      at renderElement (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:643:26)
      at fn (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:707:46)
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/src/Utils.js:100:18)
      at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:707:20)
      at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:411:22)
      at shallow (node_modules/enzyme/src/shallow.js:10:10)
      at Object.<anonymous> (src/components/SearchBar.test.js:13:25)

SearchBar.test.js 片段：

Enzyme.configure({adapter: new Adapter()})
jest.mock('../state-provider/Provider')

describe('SearchBar.jsx', () => {
    it('should show search bar', () => {
        // shallow renders react component to memory instead of DOM
        // it wraps component in wrapper to give us functions to examine component
        const wrapper = shallow(<SearchBar />) // <- line where error occurs
        const searchBar = wrapper.find('InputGroup FormControl') // searchBar also a wrapper
        expect(searchBar.exists()).toBe(true)
    })
})

Provider.js：

import React, { useContext, useReducer } from 'react'
import { asyncReducer, reducer, initialState } from './reducer';

export const StateContext = React.createContext();
export const DispatchContext = React.createContext();

export const useCocktailState = () => {
    const context = useContext(StateContext)
    if (context === undefined) {
        throw new Error(`useCocktailState must be used within a Provider`);
    }
    return context;
}

export const useCocktailDispatch = () => {
    const context = useContext(DispatchContext)
    if (context === undefined) {
        throw new Error(`useDispatch must be used within a Provier`);
    }
    return context;
}


const Provider = ({children}) => {
    const [state, dispatch] = useReducer(reducer, initialState)
    return (
        <DispatchContext.Provider value={{asyncReducer:asyncReducer(dispatch),dispatch}}>
            <StateContext.Provider value={state}>
                {children}
            </StateContext.Provider>
        </DispatchContext.Provider>
    )
}

export default Provider

在此處查看完整代碼：https : //github.com/robert-levy/cocktail-finder

uj5u.com熱心網友回復：

jest.mock('../state-provider/Provider', () => ({
 useCocktailDispatch: () => ({
  asyncReducer: //your implementation of mock method or jest.fn() for dummy one
  dispatch: //your implementation of mock or jest.fn() for dummy one
 })
}))

標籤：反应 单元测试 玩笑 酶 使用上下文

上一篇：Pytestmocker.patch正在回傳NonCallableMagicMock

下一篇：如何使用Jest和Enzyme測驗componentDidMount()中的方法？