如何使用jest和react测试库测试登录组件

Question

我尝试为一个sign in组件创建一个集成测试，但我面临一些问题。基本上我需要检查后，输入电子邮件和密码凭证，并单击提交按钮，它重定向到一个给定的页面。我使用waitForComponentToBeRemoved来检查登录组件的电子邮件或密码字段不存在，但我得到了一个错误:

Timed out in waitForElementToBeRemoved.

如果我没有正确的方法，或者如果你需要进一步的信息，请告诉我。

测试如下:

it( 'Login with real username and password', async () => {

beforeEach(() => {
fetch.dontMock()
})

act(() => {
ReactDOM.render(<App />, container);
})
// log /
console.log('history', window.location.pathname)
const email = process.env.TEST_EMAIL
const password = process.env.TEST_PASSWORD
const signInButton = screen.getByTestId('landing-signin')
fireEvent.click(signInButton)

await waitFor(async () => {
expect(signInButton).not.toBeInTheDocument()
// log /signin
console.log('history', window.location.pathname)
})

const emailField = screen.getByPlaceholderText('Email address')
const passwordField = screen.getByPlaceholderText('Your password')
const button = screen.getByTestId('submit-button')
expect(button).toBeInTheDocument()
expect(passwordField).toBeInTheDocument()
expect(emailField).toBeInTheDocument()
userEvent.type(emailField, email)
userEvent.type(passwordField, password)

await act(async () => {
fireEvent.click(button)
})
// Timed out in waitForElementToBeRemoved.
await waitForElementToBeRemoved(button).then(() => {
console.log('element has been removed')
})
// i need something to wait the response and the redirection to be done
})

ps:我不想模拟数据，它需要做真正的api调用

Answer 1

如何在源代码中执行redirect?你在用react-router吗?(在这种情况下，您可以简单地模拟重定向函数并检查它是否已被调用!?)

请查看这个相关的问题:使用React测试库提交后测试重定向

Kent C Dodds正在构建和测试一个简单的登录组件在这个视频中(从时间戳14:30开始):https://www.youtube.com/watch?v=eg_TFYF_cKM& t = 869 s& ab_channel = Applitools % 3 avisualaipoweredtestautomation