使用测试库进行点击测试时的页面重定向

Question

我正在尝试第一次在 React 中进行单元测试。 我正在尝试在提交表单后测试重定向到页面。 但它返回一个错误并且链接从未改变。 因此，对于测试，我填写了两个输入，email 和 password，然后单击按钮，它应该重定向到它收到的 /profile 页面 /。

我就是这样做的。

let container : HTMLDivElement

    beforeEach(() => {
        container = document.createElement('div')
        document.body.appendChild(container)
        ReactDOM.render(
                <MemoryRouter>
                    <Login />
                </MemoryRouter>, container)
    })

    afterEach(() => {
        document.body.removeChild(container)
        container.remove()
    })

    const setup = () => {
        const rend = render(
            <MemoryRouter>
                <Login />
            </MemoryRouter>)

        const input = container.querySelectorAll('input')
        const label = container.querySelector('label')

        return {
            input,
            label,
            ...rend,
        }
    }
    it('Redirect to profile after login', () => {
        const history = createMemoryHistory()
        render(
            <Router history={history}>
                <Login />
            </Router>
        );
        const { input } = setup()
        fireEvent.change(input[0], {target: {value: 'test@toto'}})
        fireEvent.change(input[1], {target: {value: '15fezfzeoier'}})
        userEvent.click(getByTestId(container, 'login-btnCheck'))
        expect(history.location.pathname).toBe("/profile")
    })
})

这是登录组件

import React, { useState } from 'react'
import Logo from '../assets/appiness.svg'
import { loginCheck } from './request/Request'
import { Link } from 'react-router-dom'

export const Login = () => {
    const [username, setUsername] = useState<string>("")
    const [password, setpPassword] = useState<string>("")
    const [error, setError] = useState<string>("")

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        loginCheck({username, password, setError})
        // request here
    }

    return (
        <div className="bg-appiness-blue h-screen flex flex-col items-center justify-center">
            <img src={Logo} alt="logo" className="w-64 mb-1" />
            <h1 className="text-white font-semibold text-3xl mb-7">App'Iness</h1>
            <form data-test="forms-login" className="flex mb-3" onSubmit={handleSubmit}>
                <div className="flex flex-col space-y-0.5">
                    <input name="login" placeholder="Username" className="w-64 rounded-md focus:outline-none p-2" type="text" onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)} />
                    <input name="password" placeholder="Password" className="w-64 rounded-md focus:outline-none p-2" type="password" onChange={(e: React.ChangeEvent<HTMLInputElement>) => setpPassword(e.target.value)} />
                </div>
                <button data-testid="login-btnCheck" type="submit" className="bg-appiness-orange rounded-md">
                    <i className="fas fa-arrow-right w-12 text-2xl rounded-md text-white bg-appiness-orange" />
                </button>
            </form>
            <div className="space-y-3 flex flex-col items-center">
                {error}
                <h6 className={`${error.length !== 0 ? 'block' : 'hidden'}text-appiness-darkblue text-xs`}>Forgot password</h6>
                
                <Link to="/register">
                    <button className="bg-appiness-darkblue w-28 h-8 rounded-xl text-white focus:outline-none">Sign Up</button>
                </Link>
            </div>
        </div>
    )
}