gpt4 book ai didi

javascript - 使用 Jest 和 React 测试库测试 Apollo React Hooks

转载 作者:行者123 更新时间:2023-12-03 13:52:59 24 4
gpt4 key购买 nike

我有一个使用 Apollo 突变钩子(Hook)的表单:

import React from 'react'
import { useFormik } from 'formik'
import { useLoginMutation } from '../generated'

const LoginContainer = () => {
const [loginMutation, { data, loading, error }] = useLoginMutation()

const formik = useFormik({
initialValues: {
email: '',
password: '',
},
onSubmit: values => {
loginMutation({
variables: {
input: {
email: String(values.email).trim(),
password: values.password,
},
},
})
},
})

return (
<form
onSubmit={event => {
event.preventDefault()
formik.handleSubmit(event)
}}
>
<input
data-testid="login-email-input"
name="email"
placeholder="Email address"
// label="Email"
required
type="email"
value={formik.values.email}
onChange={formik.handleChange}
/>
<input
data-testid="login-password-input"
name="password"
placeholder="password"
// label="Password"
required
type="password"
value={formik.values.password}
onChange={formik.handleChange}
/>
<button data-testid="login-submit-input" type="submit">
LOGIN
</button>
</form>
)
}

export default LoginContainer

我试图确保当用户填写表单并单击提交按钮时调用登录突变。

测试有时会成功,有时会失败。我怀疑在运行 Expect block 之前,loginMutation promise 没有得到解决。

控制台还出现以下警告:

  Warning: An update to LoginContainer inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
/* fire events that update state */
});
/* assert on the output */

这是测试:

describe('login container', () => {
let loginMutationCalled = false

const variables = {
input: {
email: 'test@example.com',
password: '123',
},
}

const result = () => {
loginMutationCalled = true
return {
data: {
Login: {
accountId: '123',
},
},
}
}

const mocks = [
{
request: {
query: LOGIN_MUTATION,
variables,
},
result,
},
]

it('should call the login mutation', async () => {
await act(async () => {
const { findByTestId } = render(
<MockedProvider mocks={mocks} addTypename={false}>
<LoginContainer />
</MockedProvider>,
)

fireEvent.change(await findByTestId('login-email-input'), {
target: {
value: 'test@example.com',
},
})

fireEvent.change(await findByTestId('login-password-input'), {
target: {
value: '123',
},
})

await wait(async () =>
fireEvent.click(await findByTestId('login-submit-input')),
)
})

expect(loginMutationCalled).toBe(true)
})
})

如何在运行断言之前确保 loginMutation promise 已得到解决?

最佳答案

请查看我的 GitHub https://github.com/Arit143/mytube-ui/blob/master/src/pages/List.spec.tsx对于异步行为等待。通常,我将行为包装起来并在函数中等待,然后等待它完成。如果您觉得登录解析需要很长时间,您可以增加等待量。只需查看 GitHub URL 作为示例,如果您仍然遇到问题,请告诉我。

关于javascript - 使用 Jest 和 React 测试库测试 Apollo React Hooks,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59098620/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com