[英]How can I test a context in react with Jest/react-testing-library
[英]How can I test functions that are provided by context using jest and react-testing-library?
我有一个<UserProvider />
组件,该组件提供了上下文,该上下文的值具有login
方法。 在我的测试中,我想检查是否已调用该方法。 如果来自上下文,我该如何检查以确保此方法在我的测试中被调用? 我尝试使用spyOn和模拟方法,但无法使其正常工作。
这是提供上下文的我的UserProvider
组件。
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
)
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
这是我的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)
})
我有一个codeandbox,但是它错误地显示jest.mock不是功能,所以我不知道它是否非常有用。
如果不稍稍更改源代码,我将无法正常工作。
首先,我必须导出实际上下文
export { UserProvider, useUser, UserContext }
我们可以使用模拟的login
功能重新创建提供程序,以下测试将为您服务。
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)
});
这完全不是最佳方法。 希望对您有所帮助。
我在这里看到另外2种方法:
Context.Consumer
。 然后,您将可以对此进行验证 const contextCallback = jest.fn();
const { getByText } = render(
<UserProvider>
<Login />
<UserContext.Consumer>{contextCallback}</UserContext.Consumer>
</UserProvider>
);
const submitButton = getByText('Login');
fireEvent.click(submitButton);
expect(contextCallback.mock.calls[0][0]).toEqual({
user: "John Doe"
});
UserContext.Consumer
(让它成为投机LoginAPI
呼叫UserContext
) jest.mock("../LoginAPI.js");
...
const { getByText } = render(
<UserProvider>
<Login />
</UserProvider>
);
const submitButton = getByText('Login');
fireEvent.click(submitButton);
expect(LoginAPI.login).toHaveBeenCalledTimes(1);
对我来说,第二个更好,而第一个则依赖于实现细节(上下文数据的结构)。
PS到第一种方法,您可以在测试中声明使用方组件,以避免导出UserContext
:
function ContextHelper({ spy }) {
const contextData = useUser();
spy(contextData);
return null;
}
...
const contextCallback = jest.fn();
const { getByText } = render(
<UserProvider>
<Login />
<ContextHelper spy={contextCallback} />
</UserProvider>
);
但是请记住, spy
可能会被多次调用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.