Display location on top of code frame

Author: victorandcode

src/__tests__/get-user-code-frame.js

@@ -40,7 +40,8 @@ test('it returns only client code frame when code frames from node_modules are f
   const userTrace = getUserCodeFrame(stack)
 
   expect(userTrace).toMatchInlineSnapshot(`
-    "  5 |         document.createTextNode('Hello world')
+    "/home/john/projects/sample-error/error-example.js:7:14
+      5 |         document.createTextNode('Hello world')
       6 |       )
     > 7 |       screen.debug()
         |              ^
@@ -59,7 +60,8 @@ test('it returns only client code frame when node code frames are present afterw
   const userTrace = getUserCodeFrame()
 
   expect(userTrace).toMatchInlineSnapshot(`
-    "  5 |         document.createTextNode('Hello world')
+    "/home/john/projects/sample-error/error-example.js:7:14
+      5 |         document.createTextNode('Hello world')
       6 |       )
     > 7 |       screen.debug()
         |              ^

src/__tests__/pretty-dom.js

@@ -1,9 +1,8 @@
 import {prettyDOM, logDOM} from '../pretty-dom'
+import {getUserCodeFrame} from '../get-user-code-frame'
 import {render, renderIntoDocument} from './helpers/test-utils'
 
-jest.mock('../get-user-code-frame', () => ({
-  getUserCodeFrame: () => '',
-}))
+jest.mock('../get-user-code-frame')
 
 beforeEach(() => {
   jest.spyOn(console, 'log').mockImplementation(() => {})
@@ -64,6 +63,36 @@ test('logDOM logs prettyDOM to the console', () => {
   `)
 })
 
+test('logDOM logs prettyDOM with code frame to the console', () => {
+  getUserCodeFrame.mockImplementationOnce(
+    () => `"/home/john/projects/sample-error/error-example.js:7:14
+      5 |         document.createTextNode('Hello World!')
+      6 |       )
+    > 7 |       screen.debug()
+        |              ^
+    "
+  `,
+  )
+  const {container} = render('<div>Hello World!</div>')
+  logDOM(container)
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
+    "<div>
+      <div>
+        Hello World!
+      </div>
+    </div>
+
+    "/home/john/projects/sample-error/error-example.js:7:14
+          5 |         document.createTextNode('Hello World!')
+          6 |       )
+        > 7 |       screen.debug()
+            |              ^
+        "
+      "
+  `)
+})
+
 describe('prettyDOM fails with first parameter without outerHTML field', () => {
   test('with array', () => {
     expect(() => prettyDOM(['outerHTML'])).toThrowErrorMatchingInlineSnapshot(

src/get-user-code-frame.js

@@ -46,7 +46,7 @@ function getCodeFrame(frame) {
       linesBelow: 0,
     },
   )
-  return `${codeFrame}\n`
+  return `${frameLocation}\n${codeFrame}\n`
 }
 
 function getUserCodeFrame() {

src/pretty-dom.js

@@ -62,7 +62,13 @@ function prettyDOM(dom, maxLength, options) {
     : debugContent
 }
 
-const logDOM = (...args) =>
-  console.log(`${getUserCodeFrame()}${prettyDOM(...args)}`)
+const logDOM = (...args) => {
+  const userCodeFrame = getUserCodeFrame()
+  if (userCodeFrame) {
+    console.log(`${prettyDOM(...args)}\n\n${userCodeFrame}`)
+  } else {
+    console.log(prettyDOM(...args))
+  }
+}
 
 export {prettyDOM, logDOM}