working on HTML serialization

.eslintrc

@@ -3,7 +3,8 @@
     "plugin:cypress-dev/general"
   ],
   "rules": {
-    "comma-dangle": ["off"]
+    "comma-dangle": "off",
+    "no-debugger": "warn"
   },
   "env": {
     "node": true

src/index.js

@@ -5,7 +5,12 @@ const itsName = require('its-name')
 const { initStore } = require('snap-shot-store')
 const la = require('lazy-ass')
 const is = require('check-more-types')
-const { serializeDomElement, identity, countSnapshots } = require('./utils')
+const {
+  serializeDomElement,
+  serializeReactToHTML,
+  identity,
+  countSnapshots
+} = require('./utils')
 const switchcase = require('switchcase')
 /* eslint-disable no-console */
 
@@ -104,7 +109,8 @@ function registerCypressSnapshot () {
   }
 
   const pickSerializer = switchcase({
-    [isJqueryElement]: serializeDomElement,
+    // [isJqueryElement]: serializeDomElement,
+    [isJqueryElement]: serializeReactToHTML,
     default: identity
   })
 

src/utils.js

@@ -1,3 +1,4 @@
+/* global Cypress */
 const sd = require('@wildpeaks/snapshot-dom')
 
 // converts DOM element to a JSON object
@@ -16,6 +17,18 @@ function serializeDomElement ($el) {
   return json
 }
 
+const stripAttribute = (attribute) => (el$) => {
+  el$.removeAttr(attribute)
+  el$.children().each(stripAttribute(attribute))
+  return el$
+}
+
+const serializeReactToHTML = (el$) => {
+  const copy$ = Cypress.$(el$.outerHTML)
+  const removedReactId = stripAttribute('data-reactid')(copy$)
+  return removedReactId.html()
+}
+
 const identity = (x) => x
 
 const publicProps = (name) => !name.startsWith('__')
@@ -26,6 +39,8 @@ const countSnapshots = (snapshots) =>
 module.exports = {
   SNAPSHOT_FILE_NAME: 'snapshots.js',
   serializeDomElement,
+  serializeReactToHTML,
   identity,
-  countSnapshots
+  countSnapshots,
+  stripAttribute
 }