Ember.js验收测试后续用例无法渲染DOM元素问题

执行一系列Ember.js验收测试时，只有第一个测试用例能正常运行，后续所有用例都无法渲染DOM。除第一个测试外，其余测试只会渲染根元素 <div id="ember-testing" class="ember-application"></div>，且内部无任何内容。以下是其中一个测试用例示例，其余验收测试结构类似：

import { visit, fillIn, click, pauseTest } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { worker } from 'atlas/mocks/browser';
// @ts-ignore
import { authenticateSession, invalidateSession } from 'ember-simple-auth/test-support';
import { addWeekdays } from 'atlas/components/financial-document/edit/component';
import moment from 'moment';

module('Acceptance | sales invoice test', function (hooks) {
  setupApplicationTest(hooks);
  let sleep = (ms: any) => new Promise((resolve) => setTimeout(resolve, ms));

  test('visiting /login', async function (assert) {
    await worker.start();
    await authenticateSession({
      authToken: '12345',
      otherData: 'some-data',
    });

    await visit('/sales-invoice/new');
    await sleep(500);
    await pauseTest();
    // 选择销售发票关联的公司
    await click('[data-test="company"] .ember-power-select-trigger');
    await fillIn(' .ember-power-select-search-input', 'th');
    await sleep(500);
    await click('.ember-power-select-option');
    await sleep(500);

    // 断言验证
    assert.dom('[data-test="financialDocument"]').hasAnyText();
    assert.dom('[data-test="canBeDirectDebitAlert"]').hasAnyText();
    assert.dom('[data-test="directDebitDate"] input').hasValue(addWeekdays(moment(), 3).format('YYYY-MM-DD'));
  });
});

排查与解决方法 #

• 清理Mock Worker资源：测试中启动的worker未在测试结束后停止，会污染后续测试环境。在hooks.afterEach中添加停止逻辑：

  hooks.afterEach(async function() {
    await worker.stop();
  });
  

• 重置认证会话：authenticateSession创建的会话未清理，残留状态会干扰后续测试。在afterEach中补充会话销毁：

  hooks.afterEach(async function() {
    await invalidateSession();
  });
  

• 替换不可靠的sleep等待：固定延迟的sleep会导致测试时序不稳定，改用Ember官方的waitFor助手等待元素或状态变更：

  import { waitFor } from '@ember/test-helpers';
  
  // 替换await sleep(500)，等待目标选项加载完成
  await waitFor('.ember-power-select-option');
  

• 检查全局状态残留：如果存在自定义全局服务或状态，需在hooks.afterEach中完成重置，确保每个测试都在干净的环境中执行。

内容的提问来源于stack exchange，提问作者Michael Vanhoutte