Why jest document.createElement('div') and other elements are empty when calling console.log?

Question

Why my html variables are always empty when jest is running? When I directly print them by accessing the innerHTML variable, the contents are there, but why they do not show up when calling JSON.stringify(obj)? How can I correctly print them for debugging?

reviewer.test.js

test('renders test site', () => {
    const things = document.createElement('div');
    things.id = "things";
    things.innerHTML = '<div>some.</div>';
    console.log('things', things)
    console.log('things', JSON.stringify(things))

    document.body.appendChild(things);
    console.log('document.body', document.body)
    console.log('document.body', JSON.stringify(document.body))

    document.body.innerHTML = '<div id="test"><div class="panel-block"></div>....</div>';
    console.log('document.body', document.body)
    console.log('document.body', JSON.stringify(document.body))
});

$ npx jest

 PASS  src/reviewer.test.js
  √ renders test site (31ms)

  console.log src/reviewer.test.js:19
    things HTMLDivElement {}

  console.log src/reviewer.test.js:20
    things {}

  console.log src/reviewer.test.js:23
    document.body HTMLBodyElement {}

  console.log src/reviewer.test.js:24
    document.body {}

  console.log src/reviewer.test.js:27
    document.body HTMLBodyElement {}

  console.log src/reviewer.test.js:28
    document.body {}

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.358s
Ran all test suites.

package.json

{
  "name": "test",
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "testEnvironment": "jsdom"
  },
  "devDependencies": {
    "jest": "^25.3.0"
  }
}

Luís Ramalho · Accepted Answer · 2020-04-17 02:17:38Z

1

It's not Jest. DOM elements cannot be converted to string using JSON.stringify(), you could use domJSON for example if you want the full object of the element. If you just want to log the contents, then console.log("things", JSON.stringify(things.outerHTML)) should work.

const things = document.createElement("div");
things.id = "things";
things.innerHTML = "<div>some.</div>";
console.log("things", things);
console.log("things", JSON.stringify(things.outerHTML))
console.log("things", domJSON.toJSON(things));

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/domJSON.min.js"></script>

Potentially you could also use console.dir()

edited Apr 17, 2020 at 2:17

answered Apr 17, 2020 at 2:08

Luís Ramalho

10.2k4 gold badges54 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Evandro Coan Over a year ago

How can I import this domJSON in my jest tests? After installing it with npm install domjson --save-dev I tried importing it with const domJSON = require('domjson'), but it is throwing this error: TypeError: Cannot read property 'href' of undefined

Luís Ramalho Over a year ago

I think for this case, console.log("things", JSON.stringify(things.outerHTML)) might be enough. You'll have to debug that, from the error message is hard to see why that is happening.

Collectives™ on Stack Overflow

Why jest document.createElement('div') and other elements are empty when calling console.log?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related