Почему jest document.createElement ('div') и другие элементы пусты при вызове console.log? - PullRequest
Новая
       7

Почему jest document.createElement ('div') и другие элементы пусты при вызове console.log?

0 голосов
/ 17 апреля 2020

Почему мои html переменные всегда пусты во время работы jest? Когда я распечатываю их напрямую, обращаясь к переменной innerHTML, содержимое там есть, но почему они не отображаются при вызове JSON.stringify(obj)? Как правильно распечатать их для отладки?

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.

пакет. json

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

1 Ответ

1 голос
/ 17 апреля 2020

Это не шутка. Элементы DOM не могут быть преобразованы в строку с помощью JSON.stringify(), вы можете использовать dom JSON, например, если вам нужен полный объект элемента. Если вы просто хотите зарегистрировать содержимое, то console.log("things", JSON.stringify(things.outerHTML)) должно работать. 

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/domjson@0.1.2/dist/domJSON.min.js"></script>

Потенциально вы также можете использовать console.dir ()

...