路由导航后未找到 Webdriver-io 组件

Question

场景：我网站的访问者单击链接并导航到显示一些文本的页面。

问题：我正在尝试测试用户单击链接时是否显示组件。

当我运行调试时，我看到显示的组件，但是，测试失败。任何想法我在测试中缺少什么？

谢谢

组件

首页组件

import React from 'react';
import { Link } from 'react-router-dom';
import styles from './home-page.scss';

const HomePage = () => {
    return (
        <div
            data-qa="home-page"
            className={styles.container}
        >
            <h2 data-qa="home-page-title">Home page</h2>
            <div data-qa="content-page-link">
                <Link to="/content">Content Page</Link>
            </div>
        </div>
    );
};

export default HomePage;

内容页面组件

import React from 'react';
import { Link } from 'react-router-dom';
import Content from '../content';
import styles from './content-page.scss';

const ContentPage = () => {
    return (
        <div
            data-qa="content-page"
            className={styles.container}
        >
            <h2 data-qa="content-page-title">Content Page</h2>
            <Content />
            <div data-qa="home-page-link">
                <Link to="/">Home Page</Link>
            </div>
        </div>
    );
};

export default ContentPage;

内容组件

import React from 'react';
import styles from './content.scss';

const Content = () => {
    return (
        <div
            data-qa="content"
            className={styles.container}
        >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    );
};

export default Content;

测试

describe('content page', () => {
    it("should navigate to content page", async () => {
        await browser.url('http://localhost:9000');
        const contentLink = await browser.react$('Link', {
            props: {
                to: '/content'
            }
        });

        await contentLink.click();

        // await browser.debug();

        expect(await (await browser.react$('Content')).isDisplayed()).toBe(true);
    });
});

INFO webdriver: RESULT { message: 'React element with selector "Content" wasn't found' }

Answer 1

我认为这可能是 webdriverio 使用的resq library 中的一个错误。似乎它不会为每次搜索刷新虚拟 dom 树。一个非常棘手的解决方法是在查找元素之前通过重置名为 isReactLoaded 的标志来强制刷新。

        await contentLink.click();
        
        // force refresh dom after event
        await browser.execute(() => {
            isReactLoaded = false;
        });

        expect(await (await browser.react$('Content')).isDisplayed()).toBe(true);