React Test 在状态更改后未按文本查找元素

Posted

技术标签:

【中文标题】React Test 在状态更改后未按文本查找元素【英文标题】:React Test doesnt find element by text after state change 【发布时间】:2021-08-02 18:41:22 【问题描述】:

我有一个LoginForm 组件,它接受login 回调并呈现登录表单。 当login 返回一个被拒绝的承诺时,该消息将显示在组件中。 这是我要测试的行为。

我正在使用 jestenzyme@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(() =&gt; expect(result.getByText(errorText)).toBeInTheDocument()); 工作。 感谢您的关键点:)

以上是关于React Test 在状态更改后未按文本查找元素的主要内容,如果未能解决你的问题,请参考以下文章

React-Stripe-Elements 元素未按预期呈现样式

在 React 中查找文本元素的颜色

React 路由器:userHistory 推送功能未按预期工作

如何在 React 中更改处于状态的数组元素

在 iOS 中 React Native 更改状态栏文本颜色

谷歌浏览器在 JavaScript 动态更改后未更新 iframe 元素 innerHTML