diff --git a/.eslintrc b/.eslintrc index b541e6b..a1b4336 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,8 @@ "plugin:cypress-dev/general" ], "rules": { - "comma-dangle": ["off"] + "comma-dangle": "off", + "no-debugger": "warn" }, "env": { "node": true diff --git a/src/index.js b/src/index.js index 48c35ff..48a8ea3 100644 --- a/src/index.js +++ b/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 }) diff --git a/src/utils.js b/src/utils.js index 4b4632f..a148e84 100644 --- a/src/utils.js +++ b/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 }