如何使用 jest 和 react-testing-library 测试上下文提供的函数? [英] How can I test functions that are provided by context using jest and react-testing-library?

问题描述

我有一个 <UserProvider/> 组件，它提供上下文，它的值中有一个 login 方法.在我的测试中，我想检查该方法是否已被调用.如果来自上下文，我如何检查以确保在我的测试中调用此方法?我试过使用 spyOn 和 mock 方法，但我无法让它们工作.

I have a <UserProvider /> component that provides context which has a login method in its value. In my test I want to check if that method has been called. How can I check to make sure this method is being called in my test if it comes from context? I've tried using the spyOn and mock methods but I can't get them to work.

这是我的 UserProvider 组件，它提供上下文.

Here's my UserProvider component which provides the context.

import React, { useState, useContext, createContext } from 'react'

const UserContext = createContext()

function UserProvider({ children }) {
  const [user, setUser] = useState(null)
  const login = user => setUser(user)

  return <UserContext.Provider value={{ user, login }}>{children}</UserContext.Provider>
}

const useUser = () => useContext(UserContext)

export { UserProvider, useUser }

这是我的 Login 组件，使用来自 UserProvider 的上下文(通过 useUser)

Here's my Login component using the context from UserProvider (via useUser)

import React from 'react'
import { useUser } from './UserProvider'

function Login() {
  const { login } = useUser()

  const handleSubmit = async e => {
    e.preventDefault()

    // I need to make sure this method is being called in my test.
    login({ name: 'John Doe' })
  }

  return (
    <form onSubmit={handleSubmit}>
      <button>Login</button>
    </form>
  )
}

export default Login

这是我的登录测试

import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import Login from './Login'
import { UserProvider, useUser } from './UserProvider'

// Is this correct?
jest.mock('./UserProvider', () => ({
  useUser: jest.fn(() => ({
    login: jest.fn()
  }))
}))

it('should log a user in', () => {
  const { getByText } = render(
    <UserProvider>
      <Login />
    </UserProvider>
  )

  const submitButton = getByText(/login/i)
  fireEvent.click(submitButton)

  // How can I make this work?
  const { login } = useUser()
  expect(login).toHaveBeenCalledTimes(1)
})

我有一个 codesandbox 但它出错了 jest.mock 不是一个函数所以我不知道它是否很有用.

I have a codesandbox but it's erroring out about jest.mock not being a function so I don't know if it's very useful.

推荐答案

如果不稍微更改源代码，我无法让它工作.

I can't get it to work without slightly change the source code a little bit.

首先，我必须导出实际上下文

First, I have to export the actual context

export { UserProvider, useUser, UserContext }

我们可以使用模拟的 login 函数重新创建提供程序，下面的测试将为您服务.

We can re create provider with a mocked login function and the following test will serve you purpose.

import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import Login from './Login'
import { UserProvider, useUser, UserContext } from './UserProvider'

it('should log a user in', () => {
  const login = jest.fn();
  const { getByText } = render(
    <UserContext.Provider value={{ login }}>
      <Login />
    </UserContext.Provider>
  );

  const submitButton = getByText('Login');
  fireEvent.click(submitButton);

  expect(login).toHaveBeenCalledTimes(1)
});

这完全有可能不是最好的方法.我希望它有所帮助.

It is entirely possible that this is not the best approach. I hope it helps.

这篇关于如何使用 jest 和 react-testing-library 测试上下文提供的函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！