ember test throw error - Cannot read property 'tagName' of undefined

1

i have migrated ember 3.16 to 3.24
I struck on ember test error. But the app works fine

Chrome 88.0 - [17 ms] - Unit | Service | preferences: it exists
    ---
        actual: >
            null
        stack: >
            TypeError: Cannot read property 'tagName' of undefined
                at Class.setup (https://localhost:4221/assets/vendor.js:41026:134)
                at Class.setupEventDispatcher (https://localhost:4221/assets/vendor.js:42523:18)
                at Class._bootSync (https://localhost:4221/assets/vendor.js:42447:14)
                at https://localhost:4221/assets/vendor.js:45731:77
                at initializePromise (https://localhost:4221/assets/vendor.js:74537:7)
                at new Promise (https://localhost:4221/assets/vendor.js:75038:35)
                at Class.boot (https://localhost:4221/assets/vendor.js:45731:27)
                at https://localhost:4221/assets/test-support.js:3656:65
                at invokeCallback (https://localhost:4221/assets/vendor.js:74510:17)
                at https://localhost:4221/assets/vendor.js:74575:26
        message: >
            Promise rejected before "it exists": Cannot read property 'tagName' of undefined
        negative: >
            false
        browser log:
2

I think the thing to look into is what is going on at that line in your vendor.js. From the stack trace it looks like an error during the event dispatchers setup method, but throwing a breakpoint there and figuring out why it is attempting to access tagName property will tell you what is going on.

3

Most of the references to tagName here are about ensuring your root element is setup correctly:

What is your rootElement set to in testing?

4

I removed setup(QUnit.assert); from testem.js and downgraded the version "ember-qunit": "^4.6.0" from 5.1.3. then it works fine.

The code setup(QUnit.assert); automatically add from ember-cli-update package when i ran ember-cli-update --resolve-conflicts

Root element setup code

if (environment === 'test') {
    ENV.rootURL = '/';
    // Testem prefers this...
    ENV.locationType = 'none';
    ENV.isTestEnvironment = true;

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
    ENV.APP.autoboot = false;
  }
5

@rwjblue Have you found anything regarding this ?

6

Add this HTML structure to tests/index.html

    <div id="qunit"></div>
    <div id="qunit-fixture">
      <div id="ember-testing-container">
        <div id="ember-testing"></div>
      </div>
    </div>
1 Like