使用 React 进行 Jasmine 功能测试

Question

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

jasmineRequire = getJasmineRequireObj();

这是在 jasmine-html.js 内联之前。然后我在我的 React 根组件中添加了一个 sn-p 来加载整个内容，如下所示：

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

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

我知道有一种不那么笨拙的方法可以做到这一点，但我想不通。我想以正确的方式执行此操作，以便我可以正确地包含我目前直接在我的规范文件中导入的任何规范助手文件。非常感谢任何指导！

Answer 1

无法保证应用程序在根组件componentDidMount 中达到其稳定状态，即使 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');
});  

测试是基于 promise 的，并且依赖于等待结果出现在 DOM 中，因为这是异步发生的。

waitForElement仅供参考，因为它不足以进行实际的端到端测试；将需要 querySelector 不支持的高级选择器（可以通过 jQuery 增强）或自定义谓词函数。

这是 E2E 框架（如 TestCafe 和 Protractor）应该具备的功能，此功能的可用性不同于用于单元测试的框架。例如。 TestCafe 有reusable and chainable selectors，可以在需要元素的地方进行隐式处理。