Jest测试是否使用参数调用了React上下文服务

应用程序

import React from 'react'
import MyComponent from './MyComponent'
import {ConnectionProvider from './context'
    
const App extends React.Component {
  render() {
    return (
      <ConnectionProvider>
        <MyComponent />
      </ConnectionProvider>
    )
  }
}

export default App

上下文

import React, { createContext, useState } from 'react'
import { Connection } from '@web/_types'
import { ContactService } from '@web/_services'

interface IConnectionContextData {
  connections: Connection[]
  getConnections: () => void
  connect: (
    contactId: string,
    source: string,
  ) => void
}

const ConnectionContextDefaultValue: IConnectionContextData = {
  connections: []
  getConnections: () => null,
  connect: () => null,
}

const useConnectionContextValue = (): ConnectionContextData => {
  const [connections, setConnections] = useState<Connection[]>([])

  const connect = async (
    contactId: string,
    source: string
  ) => {    
    try {
      await ContactService.connectRep(contactId, source)
      getConnections()
    } catch (error) {
      console.log(error)
    }
  }

  const getConnections = async () => {
    const getContactsResponse = await UserService.getConnections()
    setConnections(getContactsResponse.data)
  }

  return {
    getConnections,
    connect,
  }
}

export const ConnectionContext = createContext<ConnectionContextData>(
  ConnectionContextDefaultValue
)

export const ConnectionProvider: React.FC = ({ children }) => {
  return (
    <ConnectionContext.Provider value={useConnectionContextValue()}>
      {children}
    </ConnectionContext.Provider>
  )
}

MyComponent公司

import React, {useContext} from 'react'
import {ConnectionContext} from './context'

const MyComponent extends React.Component {   
  const { connect } = useContext(ConnectionContext)


  render() {
    return (
      <>
        <button onClick={() => connect('1234', 'Some source')}>
            Click me
          </button>
      </>
    )
  }
}

export default MyComponent

希望这是足够的上下文(请原谅这句双关语)。

我正在想办法测试一下 ContactService.connectRep 调用了 contactId 和 source . 我读到的所有内容都是为了避免直接测试上下文,但我只能模拟 connect 像 jest.fn() .

我已经模拟了上下文提供者,我可以看到 连接 调用函数时使用 联系人ID 和 来源 . 一切都很顺利,但我不知道该怎么做 联系服务。connectRep公司 已调用。有什么想法吗?