Modal Dialog Not Working with New QUnit Testing Patterns

[tomoguisuru]

Problem

I'm getting the following error in the new testing format Uncaught Error: ember-wormhole failed to render into '#modal-overlays' because the element is not in the DOM

Solution

I had to write a custom test helper in order to get modal-dialog working properly after updating my tests to use the new testing format

Here is an example:

tests/acceptance/random-test.js

import { module, test } from 'qunit';
import { click, find, visit } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import setupModalDialog from 'my-app/tests/helpers/setup-modal-dialog';

module('Acceptance | Random Test', function(hooks) {
  setupApplicationTest(hooks);
  setupModalDialog(hooks);

  test('modal shows', async function(assert) {
    await visit('/');
    await click('button.modal-test');
    
    assert.ok(await find('[data-test-modal]'));
  });
});

and here is the helper

tests/helpers/setup-modal-dialog.js

export default function setupModalDialog(hooks = self) {
  hooks.beforeEach(function() {
    this.rootEl = document.querySelector(this.owner.rootElement);
    this.modalDivEl = document.createElement('div');
    this.modalDivEl.id = 'modal-overlays';

    this.rootEl.appendChild(this.modalDivEl);
  });

  hooks.afterEach(function() {
    this.rootEl.removeChild(this.modalDivEl);
  });
}

This was just a first stab at getting my tests to work again. I'd like to here what others are doing to work around this issue or if there is an official guide on using modal-dialog in the new tests

[Redsandro]

Hi @tomoguisuru, I'm observing the same problem, but in the main app using fastboot.

Are you observing this? It works fine in non-fastboot. I was under the impression fastboot should work since 2.3.0.