React Test 在状态更改后未按文本查找元素
Posted
技术标签:
【中文标题】React Test 在状态更改后未按文本查找元素【英文标题】:React Test doesnt find element by text after state change 【发布时间】:2021-08-02 18:41:22 【问题描述】:我有一个LoginForm
组件,它接受login
回调并呈现登录表单。
当login
返回一个被拒绝的承诺时,该消息将显示在组件中。
这是我要测试的行为。
我正在使用 jest
、enzyme
和 @testing-library/react
的 create-react-app 环境。
我已经在 UI(浏览器)中手动测试了组件,并确保它可以正常工作并显示消息,但测试不工作并且最后一个断言失败:
TestingLibraryElementError: Unable to find an element with the text: There was an error.
This could be because the text is broken up by multiple elements.
In this case, you can provide a function for your text matcher to make your matcher more flexible.
我已经检查了在浏览器中呈现时的消息,它以文字“出现错误”的形式出现,中间没有任何元素。仅由样式化组件包裹。 我无法进行测试,谁能帮忙?
我的测试如下:
it("should display error text in login form when login fails", async () =>
const errorText = "There was an error";
const login = jest.fn(() =>
return Promise.reject(errorText);
);
const result = render(<LoginForm login=login />);
const form = result.container.querySelector("form");
const email = await result.findByLabelText("Email");
const password = await result.findByLabelText("Password");
fireEvent.change(email, target: name: "email", value: "1");
fireEvent.change(password, target: name: "password", value: "1");
expect(form).toBeDefined();
fireEvent.submit(form!, );
expect(login).toBeCalledTimes(1);
// This assertion fails
expect(result.getByText(errorText)).toBeInTheDocument();
);
我的组件渲染如下:
render()
const error, email, password = this.state;
return (
<Form noValidate onSubmit=this.onSubmit>
<InputWrapper>
<Label htmlFor="email">Email</Label>
<InputEmail id="email" name="email" value=email onChange=this.onChange/>
</InputWrapper>
<InputWrapper>
<Label htmlFor="password">Password</Label>
<InputPassword id="password" name="password" value=password onChange=this.onChange/>
</InputWrapper>
// LoginError is a styled-component
error && (<LoginError>error</LoginError>)
this.props.children
<Button>Login</Button>
</Form>
);
【问题讨论】:
` TypeError: wrapper.findByLabelText is not a function` 对我来说这是错误 尝试在 fireEvent.submit(form!, ); 之后使用 wait 或 waitFor 方法等待承诺解决并重新渲染发生。参考:testing-library.com/docs/dom-testing-library/api-async#waitfor 【参考方案1】:尝试在 fireEvent.submit(form!, ); 之后使用 wait 或 waitFor 方法等待承诺解决并重新渲染发生。
参考:testing-library.com/docs/dom-testing-library/api-async#waitfor
【讨论】:
await waitFor(() => expect(result.getByText(errorText)).toBeInTheDocument());
工作。
感谢您的关键点:)以上是关于React Test 在状态更改后未按文本查找元素的主要内容,如果未能解决你的问题,请参考以下文章
React-Stripe-Elements 元素未按预期呈现样式
React 路由器:userHistory 推送功能未按预期工作