路线导航后未找到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库中的一个错误。它似乎并没有为每次搜索刷新虚拟dom树。一个非常巧妙的解决方法是，在查找元素之前，通过重置一个名为isReactLoaded的标志来强制刷新。

await contentLink.click();

// force refresh dom after event
await browser.execute(() => {
isReactLoaded = false;
});
expect(await (await browser.react$('Content')).isDisplayed()).toBe(true);