Javascript 用React进行茉莉功能测试

有人能解释一下将Jasmine test runner集成到React应用程序中的正确方法吗（不添加业力）？我正在将测试用例部署到电视上，并在电视上运行独立的规范运行程序。我不得不内联并传输JS，这就是我遇到麻烦的地方。最后，我手动将jasmine.js jasmine-html.js和boot.js文件连接到一个jasmine-all.js文件中，并插入一个调用来定义jasmineRequire，如下所示：

jasmineRequire = getJasmineRequireObj();

这就发生在jasmine-html.js内联之前。然后，我在我的React根组件中添加了一个片段来加载整个过程，如下所示：

  componentDidMount() {
   import('./jasmine/lib/jasmine-3.2.1/jasmine-all')
     .then(() => {return import('./spec/MyAppSpec');});
  }

我在这里使用动态导入来保证执行顺序。这个想法是允许应用程序加载，然后加载测试运行程序，最后加载功能性测试，这些测试作为一个整体运行应用程序。这些测试将向应用程序发送关键事件和输入，就像它是最终用户一样

---

我知道有一个不那么麻烦的方法可以做到这一点，但我想不出来。我希望以正确的方式执行此操作，以便能够正确地包含任何等级库帮助文件，我当前正在直接将其导入等级库文件中。非常感谢您的指导

即使所有异步操作（如API请求）都被存根，也不能保证应用程序在根组件中达到稳定状态。应该以相反的方式完成，即在测试中初始化应用程序并等待其稳定

Jasmine中没有用于功能/E2E测试的内置功能，它必须从头开始编写

有点像：

async function waitForElement(selector, parent = document, timeout = 2000) {
  let isTimeout;

  setTimeout(() => {
    isTimeout = true;
  }, timeout);

  let el;
  while (!(el = parent.querySelector(selector))) {
    if (isTimeout) throw new Error('timeout');
    await new Promise(resolve => setTimeout(resolve, 50));
  }

  return el;
}

const root = document.getElementById('root');
beforeEach(() => {
  ReactDOM.render(<App/>, root);
});

afterEach(() => {
  ReactDOM.unmountComponentAtNode(root);
});

it('should have foo child', async () => {
  const foo = await waitForElement('div.foo', root, 5000);
  expect($(foo).text()).toContain('foo text');
});  

异步函数waitForElement（选择器，父项=文档，超时=2000）{ 让我出去； 设置超时（（）=>{ isTimeout=true； }，超时）； 让el； 而（！（el=parent.querySelector（选择器）））{ 如果（isTimeout）抛出新错误（“超时”）； 等待新的承诺（resolve=>setTimeout（resolve，50））； } 返回el； } const root=document.getElementById（'root'）； 在每个之前（（）=>{

---

ReactDOM.render（和量角器一样，该功能的可用性与用于单元测试的框架不同。例如，TestCafe具有可以在需要元素的地方隐式处理的功能。

我不确定在

componentDidMount

中导入有什么意义。这是一个应该实例化组件的规范ent，不是以相反的方式。我在这里使用动态导入来保证执行顺序-你不能。组件在安装后可能会更改。它们可能是异步的，并且不会保证链接。你可能会在规格中到处出现笨拙的设置超时。我建议不要将工具用于它们不打算用于的作业。有些e像Testcafe这样的2e框架更合适。如果你想测试整个React应用程序的工作方式，只需像其他任何JS应用程序一样进行测试。我没有实例化规范中的组件。这些功能测试是在整个应用程序加载后运行的，因为它们将应用程序作为一个单独的黑盒单元进行测试。我还需要确保规范不会执行e在测试运行程序加载之前。这就是我使用动态导入的意图。我导入测试运行程序，然后加载/运行我的规范。我更新了我的问题，进一步强调如果标题中没有明确说明，这些都是功能测试。似乎我正确理解了这个情况。正如我所说，您选择了错误的工具。E2e框架blackbox测试的特定功能，例如，等待DOM元素出现等，而不考虑后台的异步进程。Jasmine仅具有单元测试功能。可以使e2e测试在那里工作，但您需要从头开始编写此功能，即编写一组专用于e2e的辅助函数（量角器E2E框架基于Jasmine，IIRC）。谢谢，我理解你的意思。为了澄清，我研究了各种e2e框架，不幸的是，我正在开发的平台目前面临许多挑战。我的目标是Tizen 2.x电视，因为我的访问权限有限。这些工具中的许多都需要根访问权限和/或添加二进制文件以便于检测。我正在使用g Jasmine作为一个穷人的滚动你自己的自动化，这是我过去在Android上做的事情。谢谢你，我知道你要去哪里。我想我的直接问题是通过导入正确加载Jasmine，但你表示我最终会遇到同步问题，因为当

componentDidMount（）

fires。我将调查testcafe，因为它听起来似乎绕过了我在设备上运行web驱动程序的直接限制。我最终会遇到同步问题，因为某些元素不能保证可用-这是正确的，这是黑盒测试应该解决的问题。如何解决仍然是一个难题让testcafe自动化我的react TV应用程序，因为这与启动浏览器不同。“页面”我需要加载的是应用程序捆绑包上下文中的index.js。我必须以某种方式欺骗电视启动应用程序，而不是加载页面。testcafe是否有一个可以捆绑的测试html，它可以调用运行者的主页？以下是远程测试：看起来我可以让远程设备在本地网络上打开URL，但那是uld退出我的

应用程序

并运行web浏览器。我需要在我的应用程序中加载/测试页面，而不是运行可能有点挑战性的浏览器。只是忘记了。它与测试框架无关，可以与Jasmine一起使用。由于它专注于功能测试，它已经包含了一些帮助程序，如waitForElement。