Does this still work in Jest?

[soulfresh]

This looks like a great tool but I've been unable to get it working with the latest version of Chrome. Is this project still supported/in use? If not, do you have some other way you've been debugging DOM elements in jsDom?

I've tried your setup steps and the manual test steps outlined in your development README but the formatter no longer recognizes HTML elements. The isElement() function never returns true for me when I run console.log(exampleNode) from the breakpoint in jest.test.js. Trying to debug that is a bit tricky since the console doesn't break on debugger statements in the header function.

I've noticed that the x parameter passed to the header function seems to be an object wrapping the console log arguments rather than the arguments themselves. I'm not sure if that's something weird with my setup.

// jest.test.js
  let exampleNode = document.getElementById("root");
  expect(exampleNode).toBeDefined();

  console.log(exampleNode);
  debugger;
  ...

// header.js
module.exports = x => {
  if (!isElement(x)) {
    console.log(
      'NOT AN ELEMENT', 
      typeof(x),  
      Object.keys(x), 
      x.exampleNode && x.exampleNode.nodeType
    ); // -->  NOT AN ELEMENT object [ 'exampleNode' ] 1

    // i.e. use normal formatter
    return null;
  }
  ...
}

As you can see, Object.keys(x) returns an object that has the key 'exampleNode' which is the HTMLElement to log.

Is this something strange with my environment? I'd love to get this working because it would be so helpful when debugging jest tests.

[viddo]

Yes this does work in latest Chrome, but there appear to be an issue with Jest above v22 (which was what I used at the time of implementing/using this myself).

I suspect the introduction of custom console objects[1][2] might have something to do with it but would need to fork and modify jest source to verify that. Don't have the time to investigate further at this time, sorry.

Running your code outside the test environment in a normal NodeJS process could be a workaround I guess, but yeah it is not ideal to say the least.

[soulfresh]

Thanks for pointing that out, @viddo. I'll dig a bit on the Jest side to see what I can figure out.

[viddo]

Better late than never I guess…

Updated internal tests and examples to use latest Jest and NodeJS, confirmed that it still works like before. Just had to update the manual test for Jest since configuration had some breaking changes. Original and published code v1.0.1 is still the same though. Published as v1.0.1, https://www.npmjs.com/package/jsdom-devtools-formatter

[viddo]

Reopening, as I was looking into #4 it seems like Jest integration is still borked. 😢 I'll edit the issue title to reflect contents of this thread.