WebdriverIO E2E 测试 - 模拟在 React 组件中调用的函数答案

【问题标题】：WebdriverIO E2E tests - Mock a function called inside a React ComponentWebdriverIO E2E 测试 - 模拟在 React 组件中调用的函数
【发布时间】：2021-01-06 14:31:59
【问题描述】：

有没有办法使用 WebdriverIO 模拟在 React 功能组件中调用的函数？

我需要运行 E2E 测试并根据组件内部触发的逻辑验证 UI，但我找不到使用 WebdriverIO 的方法。

例如，我的意图是模拟 checkIfUserHasPermissions 的结果，运行 E2E 测试，并验证浏览器显示“欢迎”或“不允许”。

Jest 提供了一个工具to mock functions，我想知道 WebdriverIO 是否有类似的东西。在他们的文档中，to mock a React prop 选项可用，但与此特定用例无关：

import { checkIfUserHasPermissions } from '/utils';

export default function Landing() {
  return (
    <div className="App">
      {  
        checkIfUserHasPermissions() ? 
          <h1>Welcome</h1> : 
          <h1>Not allowed</h1>
      }
    </div>
  );
}

有什么想法吗？

谢谢，

【问题讨论】：

checkIfUserHasPermissions 是做什么的？您的 E2E 测试根本不应该干扰源代码。
您将如何测试浏览器是否显示“欢迎”和“不允许”？这就是我的观点。 checkIfUserHasPermissions 只是一个例子。
从你发布的内容来看，我不知道。在一般情况下，我希望如果我在没有登录的情况下访问，或者以没有访问此特定页面的用户身份登录，我会看到“不允许”，然后如果我以用户身份登录访问我会看到“欢迎”。因此，E2E 测试设置的一部分将是创建具有适当访问权限的用户（如果需要，其他用户没有），然后测试可以使用这些用户。
是的，对于具有简单用户流程的应用程序来说，这将是一个解决方案，但就我而言，我需要在一个大型项目中测试复杂的组件，并找到一种方法来模拟一个内部的原子函数特定的组件（Jest provides）会让事情变得更容易......不过感谢您的意见，我在我的问题中添加了更多细节。
您可以在其他级别测试这些东西，E2E 测试应该像真正的用户一样锻炼您的整个系统。否则就没有什么价值了。

标签： reactjs webdriver-io

【解决方案1】：

这实际上是可能的，但不推荐。

有两种选择：

通过执行一些带有browser.execute的js来更改功能。请您的开发人员帮助从外部访问该功能。
使用browser.mock 在函数加载前更改函数的文本内容。见https://webdriver.io/docs/api/browser/mock.html

【讨论】：