javascript - 使用 React 进行 Jasmine 功能测试

Question

有人可以解释将 Jasmine 测试运行程序集成到 React 应用程序中的正确方法(不添加 Karma)吗？我正在将我的测试用例部署到电视上并在电视机上运行独立的规范运行器。我不得不内联和转换 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');});
  }

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

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

Answer 1

无法保证应用程序在根组件 componentDidMount 中达到其稳定状态，即使 API 请求等所有异步操作都已 stub 。它应该以相反的方式完成，即应用程序在测试内部初始化并等待稳定。

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 仅供引用，因为它不足以进行真实世界的 E2E 测试；将需要 querySelector(可以使用 jQuery 增强)或自定义谓词函数不支持的高级选择器。

这是E2E框架喜欢的功能TestCafe和 Protractor 预计会有，此功能的可用性不同于用于单元测试的框架。例如。 TestCafe 有 reusable and chainable selectors可以在需要元素的地方隐式处理。