setupRenderingTest render component outside the container

[tau150]

I am updating an Ember app from 2.18 to 3.11, we have several components tests, and all of them are failing. I have noticed that if try to show on the screen with assert.async(), components are being rendered outside the container.

This test for example it's failing

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | loading content', function(hooks) {
  setupRenderingTest(hooks);

  test('can display content without block form in h2 tags', async function(assert) {
    await render(hbs`{{loading-content defaultText='Content'}}`);
    assert.dom('h2').exists();
  });
});

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | loading content', function(hooks) {
  setupRenderingTest(hooks);

  test('can display content without block form in h2 tags', async function(assert) {
    await render(hbs`{{loading-content defaultText='Content'}}`);
    assert.async()
  });
});

and this is the example when I added assert async, I am assuming that can't find the elements because are rendering in the wrong place, in this case, the component it's just a loading spinner that can be seen just to the right of the container.

Dependencies

  "devDependencies": {
    "@ember/jquery": "^0.6.0",
    "@ember/optional-features": "^0.7.0",
    "angular-material-source": "github:angular/material#v1.1.4",
    "broccoli-asset-rev": "^3.0.0",
    "dotenv": "^10.0.0",
    "ember-ajax": "^5.0.0",
    "ember-auto-import": "^2.0.2",
    "ember-can": "^3.1.0",
    "ember-cli": "3.11.0",
    "ember-cli-active-link-wrapper": "^0.5.0",
    "ember-cli-babel": "^7.26.6",
    "ember-cli-content-security-policy": "^1.0.0",
    "ember-cli-dependency-checker": "^3.1.0",
    "ember-cli-document-title": "^1.1.0",
    "ember-cli-eslint": "^5.1.0",
    "ember-cli-htmlbars": "^3.0.1",
    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
    "ember-cli-inject-live-reload": "^1.8.2",
    "ember-cli-mirage": "^0.4.10",
    "ember-cli-moment-shim": "^3.8.0",
    "ember-cli-sass": "~8.0.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-template-lint": "^1.0.0-beta.1",
    "ember-cli-uglify": "^2.1.0",
    "ember-concurrency": "0.9.0",
    "ember-cp-validations": "^4.0.0-beta.12",
    "ember-cpm": "3.2.0",
    "ember-data": "^3.11.0",
    "ember-disable-proxy-controllers": "^1.0.1",
    "ember-export-application-global": "^2.0.0",
    "ember-feature-flags": "^6.0.0",
    "ember-flatpickr": "^2.16.4",
    "ember-load-initializers": "^2.0.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-moment": "^8.0.1",
    "ember-paper": "1.0.0-beta.27",
    "ember-promise-helpers": "^1.0.6",
    "ember-qunit": "4.4.1",
    "ember-resolver": "^5.0.1",
    "ember-route-action-helper": "^2.0.0",
    "ember-simple-auth": "^1.9.2",
    "ember-simple-auth-token": "3.0.0",
    "ember-sinon": "^5.0.0",
    "ember-source": "~3.11.1",
    "ember-transition-helper": "^1.0.0",
    "ember-truth-helpers": "^2.1.0",
    "eslint-plugin-ember-suave": "^1.0.0",
    "eslint-plugin-node": "^9.0.1",
    "js-string-escape": "^1.0.0",
    "jwt-decode": "^2.2.0",
    "loader.js": "^4.7.0",
    "qunit-dom": "^0.8.4",
    "sass": "^1.15.2",
    "webpack": "^5.40.0"
  },
  "dependencies": {
    "acorn": "^8.4.1",
    "bower": "^1.8.0"
  }

I appreciate any clarification about this issue, any thoughts?

[RobbieTheWagner]

@tau150 did you ever figure this out? Was your element meant to be rendered globally?