HtmlElementTypeError for custom jsdom instance #58

sheerun · 2018-09-17T09:36:35Z

jest-dom version: 1.11.0
node version: 10.4.1
npm (or yarn) version: yarn 1.7.0

Relevant code or config:

describe('Index', () => {
  it('Suggests cities to search by', async () => {
    const { window } = await next.render('/')
    expect(window.document).toHaveTextContent('Warszawa')
  })
})

next.render is a helper I've created that returns custom jsdom instance

What you did:

Tried to use toHaveTextContent matcher with custom jsdom instance

What happened:

Error is thrown:

    received value must be an HTMLElement or an SVGElement.
    Received:
      object:

Reproduction:

As above

Problem description:

It seems you throw HtmlElementTypeError with htmlElement instanceof HTMLElement but the element that I pass has separate of HTMLElement created along separate window object.

See:

const { window } = new JSDOM(...)
console.log(window.document instanceof Document) # => false
console.log(window.document instanceof window.Document) # => true

Suggested solution:

Search for Document class in scope of passed container?
Use constructor.name, __proto__.constructor.name, __proto__.__proto__.constructor.name etc. instead of instanceof?

The text was updated successfully, but these errors were encountered:

sheerun · 2018-09-17T09:43:56Z

Also, why I do it? Among others here's the quote for jsdom readme:

Note that we strongly advise against trying to "execute scripts" by mashing together the jsdom and Node global environments (e.g. by doing global.window = dom.window), and then executing scripts or test code inside the Node global environment. Instead, you should treat jsdom like you would a browser, and run all scripts and tests that need access to a DOM inside the jsdom environment, using window.eval or runScripts: "dangerously". This might require, for example, creating a browserify bundle to execute as a <script> element—just like you would in a browser.

gnapse · 2018-09-17T13:03:48Z

Can you provide a small repo where others can reproduce the problem? Also, even better, if you can provide the fix yourself, attempting what you suggest in the suggested solution section, that'd be great.

Thanks!

sheerun · 2018-09-17T14:13:20Z

Here you go...

npm init --force
npm install --save jsdom jest-dom

And execute following index.js file:

const { JSDOM } = require('jsdom')
const { toHaveTextContent } = require('jest-dom')
const { window } = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(window.document.body instanceof window.HTMLElement)
toHaveTextContent(window.document.body, 'Hello world')

sheerun · 2018-09-17T14:13:56Z

I don't want to suggest any fix, I just think it should work with this method of using

gnapse · 2018-10-03T20:02:39Z

Sorry for the delayed response.

I'm not familiar with using custom jsdom instances. So I do not feel comfortable fixing it myself. It seems you have some suggested solutions in your original issue report above. Maybe you can contribute a fix yourself?

gnapse · 2018-10-09T00:54:41Z

🎉 This issue has been resolved in version 2.0.4 🎉

The release is available on:

npm package (@latest dist-tag)
GitHub release

Your semantic-release bot 📦🚀

sheerun mentioned this issue Oct 8, 2018

Allow running in node environment #64

Merged

gnapse closed this as completed in #64 Oct 9, 2018

eps1lon mentioned this issue Oct 10, 2019

test: Run in node testing-library/dom-testing-library#377

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HtmlElementTypeError for custom jsdom instance #58

HtmlElementTypeError for custom jsdom instance #58

sheerun commented Sep 17, 2018 •

edited

Loading

sheerun commented Sep 17, 2018 •

edited by gnapse

Loading

gnapse commented Sep 17, 2018

sheerun commented Sep 17, 2018 •

edited

Loading

sheerun commented Sep 17, 2018

gnapse commented Oct 3, 2018

gnapse commented Oct 9, 2018

HtmlElementTypeError for custom jsdom instance #58

HtmlElementTypeError for custom jsdom instance #58

Comments

sheerun commented Sep 17, 2018 • edited Loading

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Problem description:

Suggested solution:

sheerun commented Sep 17, 2018 • edited by gnapse Loading

gnapse commented Sep 17, 2018

sheerun commented Sep 17, 2018 • edited Loading

sheerun commented Sep 17, 2018

gnapse commented Oct 3, 2018

gnapse commented Oct 9, 2018

sheerun commented Sep 17, 2018 •

edited

Loading

sheerun commented Sep 17, 2018 •

edited by gnapse

Loading

sheerun commented Sep 17, 2018 •

edited

Loading