我如何 运行 在 authcontext() 上使用 jest/RTL 进行测试
how do i run a test with jest/RTL on authcontext()
我正在尝试在用户登录正确信息时测试我的代码的过程;但是,我遇到了一个错误,指出 authContext 被视为未定义。我是否正确测试了这个?我该如何解决这个错误?
错误
TypeError: Cannot read property 'setUser' of undefined
25 | const { isAuthenticated, user } = data;
26 | if (isAuthenticated) {
> 27 | authContext.setUser(user);
loginForm.test.js
test('user input correct login information', () => {
const { getByTestId, getByText } = render(<LoginForm />);
const resInfo = {username: 'Bpun1p'}
const resp = {isAuthenticated: true, user: resInfo}
AuthService.login.mockResolvedValue(resp)
fireEvent.change(getByTestId('Username'), {target: {value: "Bpun1p"}})
fireEvent.change(getByTestId('Password'), {target: {value: "Guy123su"}})
fireEvent.click(getByTestId('LoginBtn'));
});
loginForm.js
import React, { useContext, useState } from 'react';
import { useHistory } from 'react-router-dom';
import SocialSignUp from './SocialSignUp';
import { AuthContext } from '../../context/AuthContext';
import AuthService from '../../service/AuthService';
function LoginForm() {
const [username, setUsername] = useState({ username: '' });
const [isValidEntry, setValidEntry] = useState(true);
const authContext = useContext(AuthContext);
const history = useHistory();
const onChange = (event) => {
setUsername({ ...username, [event.target.name]: event.target.value });
};
const onSubmit = (event) => {
event.preventDefault();
if (username.username !== '') {
AuthService.login(username)
.then((data) => {
console.log(data);
const { isAuthenticated, user } = data;
if (isAuthenticated) {
authContext.setUser(user);
authContext.setIsAuthenticated(isAuthenticated);
history.push('/profile/global');
} else setValidEntry(false);
});
} else setValidEntry(false);
};
在测试 <LoginForm/>
中替换为 <AuthContext.Provider> <LoginForm/><AuthContext.Provider>
并为 运行 应用
传递 AuthContext.Provider 所需的道具
我正在尝试在用户登录正确信息时测试我的代码的过程;但是,我遇到了一个错误,指出 authContext 被视为未定义。我是否正确测试了这个?我该如何解决这个错误?
错误
TypeError: Cannot read property 'setUser' of undefined
25 | const { isAuthenticated, user } = data;
26 | if (isAuthenticated) {
> 27 | authContext.setUser(user);
loginForm.test.js
test('user input correct login information', () => {
const { getByTestId, getByText } = render(<LoginForm />);
const resInfo = {username: 'Bpun1p'}
const resp = {isAuthenticated: true, user: resInfo}
AuthService.login.mockResolvedValue(resp)
fireEvent.change(getByTestId('Username'), {target: {value: "Bpun1p"}})
fireEvent.change(getByTestId('Password'), {target: {value: "Guy123su"}})
fireEvent.click(getByTestId('LoginBtn'));
});
loginForm.js
import React, { useContext, useState } from 'react';
import { useHistory } from 'react-router-dom';
import SocialSignUp from './SocialSignUp';
import { AuthContext } from '../../context/AuthContext';
import AuthService from '../../service/AuthService';
function LoginForm() {
const [username, setUsername] = useState({ username: '' });
const [isValidEntry, setValidEntry] = useState(true);
const authContext = useContext(AuthContext);
const history = useHistory();
const onChange = (event) => {
setUsername({ ...username, [event.target.name]: event.target.value });
};
const onSubmit = (event) => {
event.preventDefault();
if (username.username !== '') {
AuthService.login(username)
.then((data) => {
console.log(data);
const { isAuthenticated, user } = data;
if (isAuthenticated) {
authContext.setUser(user);
authContext.setIsAuthenticated(isAuthenticated);
history.push('/profile/global');
} else setValidEntry(false);
});
} else setValidEntry(false);
};
在测试 <LoginForm/>
中替换为 <AuthContext.Provider> <LoginForm/><AuthContext.Provider>
并为 运行 应用