开玩笑模拟 API 调用并期望加载消失

问：

我创建了一个简单的组件来验证用户的电子邮件地址。所以页面应该像这样工作：

1. 在加载状态下打开页面
2. 执行 api 调用以验证用户
3. 禁用加载状态和成功消息

下面是 VerifyUser.tsx 组件的代码

const VerifyUser = () => {
const { token } = useParams()
const dispatch = useAppDispatch()
const navigate = useNavigate()
const verifyState = useAppSelector((state) => state.auth.verify)

useEffect(() => {
    fetchData()
}, [location.pathname])

const fetchData = () => {
    dispatch(getActivation({ token: token || '' }))
}

return (
    <Loading loading={verifyState.loading}>
        
            <>
                <DoubleSidedImage
                    darkModeSrc=""
                    src="/img/actions/verify-success.jpg"
                    className="w-[300px] mx-auto"
                    alt="Verify Success"
                />
                <div
                    className="mt-6 text-center"
                    data-testid="verify-container"
                >
                    <h3 className="mb-2">You made it!</h3>
                    <p className="text-base">
                        You activated successfully your account. You can now
                        login.
                    </p>
                    <Button
                        variant="twoTone"
                        className="mt-4"
                        onClick={() => {
                            navigate(REDIRECT_LOGIN_URL_KEY)
                        }}
                    >
                        Click here to login
                    </Button>
                </div>
            </>
        
    </Loading>
)}
export default VerifyUser

为了测试这个组件，我创建了一个简单的jest测试，如下所示：

import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import VerifyUser from '../views/auth/VerifyUser/VerifyUser'
import * as ApiVerifyUser from '../services/AuthService'
import store from '../store'
const ModelMock = require('../utils/ModelMock')

afterEach(() => {
    // restore the spy created with spyOn
    jest.restoreAllMocks()
})

function renderLoginForm() {
    return render(
        <Provider store={store}>
            <BrowserRouter>
                <VerifyUser />
            </BrowserRouter>
        </Provider>
    )
}

test('Renders correctly', async () => {
    const container = renderLoginForm()
    ModelMock.mockMethod(ApiVerifyUser, 'apiVerifyUser', {})
    expect(container).toContain('You made it!')
})

为 apiCall 创建我的自定义模拟

export const mockMethod = (model: any, method: any, response: any) => {
    return jest.spyOn(model, method).mockImplementation(() => {
        const defer = $.Deferred()
        defer.resolve(response)
        return defer.promise()
    })
}

测试每次都失败，因为“expect”始终发现加载图标仍在运行。你有什么想法吗？