HTML preview doesn't work

[Vargentum]

When I try to press switcher icon, nothing changes. Only raw preview is available. Here my snapshot:

exports[`<Auth /> Auth with mode "reset_password" should match snapshot 1`] = `

<div>
  <h1 class="App-title is-hero mbxl">
    Reset Password
  </h1>
  <form class="base-form">
    <div>
      <div class="base-form-body">
        <div class="base-form-group">
          <div class="base-form-group-title">
            Reset Password
          </div>
          <div class="base-form-row is-first">
            <label class="base-form-label"
                   for="email"
            >
              Your email
            </label>
            <input type="email"
                   name="email"
                   class="base-input"
                   value="vlad.serebriakov@talkable.com"
            >
          </div>
        </div>
      </div>
      <div class="base-form-footer">
        <input type="submit"
               value="Reset Password"
               class="base-btn is-success is-xl ac-reset-password-button"
        >
      </div>
    </div>
  </form>
</div>

`;

Any thoughts?

[guigrpa]

Could you please share the versions of jest, jest-html you're using? Also please specify your OS, and jest configuration (maybe you're not including jest-html in the list of serializers?).

[Vargentum]

"jest": "^21.0.1" "jest-html": "^1.3.5"

"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "modulePaths": [
      "app/javascript",
      "app/javascript/__tests__"
    ],
    "testRegex": ".*test\\.js$",
    "verbose": true,
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/app/javascript/__tests__/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/app/javascript/__tests__/__mocks__/styleMock.js"
    },
    "setupFiles": [
      "<rootDir>/app/javascript/__tests__/__mocks__/setup.js"
    ],
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-html"
    ]
}

OSX 10.12.5

[jDeppen]

I'm having the same issue. Did you get it resolved, @Vargentum? Thank you

"jest": "^21.2.1",
"jest-html": "^1.3.5",

OSX 10.13.1

  "jest": {
    "snapshotSerializers": ["<rootDir>/node_modules/jest-html"],
    "testRegex": ".*test\\.jsx?$",
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
        "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "styles$": "<rootDir>/__mocks__/styleMock.js"
    }
  },

[Vargentum]

@jDeppen nope.

[guigrpa]

Do you have a repo I can clone and see what's happening?

[guigrpa]

Closed due to inactivity

[rizky]

Hey @guigrpa!

I'm having the same issue.

"jest": "^23.1.0",
"jest-html": "^1.4.0"

"jest": {
    "snapshotSerializers": ["jest-html"]
},

if you need to see my project, you can clone it here https://github.com/rizkyario/42-matcha.git checkout to branch setup/jest-html

[jangerhard]

Also having issues..

"jest": "^23.4.1",
"jest-html": "^1.4.0"

It worked after I changed from

expect(rendered.toJSON()).toMatchSnapshot();

to

expect(rendered).toMatchSnapshot();

[interaminense]

up!

[guigrpa]

Could you please check whether the problem is solved in v1.5.0?

[dgreuel]

I'm still having this problem with v1.5.0:

    "jest": "22.4.3" (provided by "react-scripts": "react-scripts@2.0.0-next.a671462c"),
    "jest-html": "^1.5.0",

"jest": {
    "snapshotSerializers": ["jest-html"]
}

macOS 10.13.6 My app was created with create-react-app and ejected, if that helps. I even tried the following in my test file, with no luck:

import { test, print } from 'jest-html/lib/serializer'

it('should render correctly', () => {
    expect.addSnapshotSerializer({ test, print })
    expect(rendered).toMatchSnapshot()
  })

[dgreuel]

I figured out what the problem was...at first I was using React Testing Library and thought that might be it, so I switched to Enzyme, which didn't work either. Getting rid of both of those and using React Test Renderer worked.

I looked at @rizkyario 's repo and looks like he was using Enzyme as well.

[srghma]

for the snapshot in the first message - jest-html wont render snapshot if it doesnt contain ------------HTML PREVIEW--------------- at the end

I had the same problem - jest-html didnt render html strings

test example

import * as R from 'ramda'
import render from '../render'

describe('render', () => {
  it('renders', async () => {
    const htmlString = render()
    expect(htmlString).toMatchSnapshot();
  })
})

before

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`render renders 1`] = `
"<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title> Last Minute Offer </title>
</head>

<body>
  <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> Last Minute Offer... </div>
</body>

</html>"
`;

after I added custom serializer

// jest.config.js

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },

  setupTestFrameworkScriptFile: 'jest-extended',

  testPathIgnorePatterns:       ['<rootDir>/node_modules/'],

  // required for jest-html snapshot previewer
  // it removes statiring and ending " if string starts from <
  snapshotSerializers:          ["<rootDir>/__jest-utils__/snapshotSerializer.js"],
}

// snapshotSerializer.js
import { HTML_PREVIEW_SEPARATOR } from 'jest-html/lib/serializer'

module.exports = {
  test(object) {
    return typeof object === 'string' && object.trim()[0] === '<';
  },
  print(val) {
    return HTML_PREVIEW_SEPARATOR + '\n' + val;
  },
};

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`render renders 1`] = `
------------HTML PREVIEW---------------
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title> Last Minute Offer </title>
</head>

<body>
  <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> Last Minute Offer... </div>
</body>

</html>
`;

[srghma]

maybe it's possible to change client application to render snapshot IF:

1. if snapshot content has ------------HTML PREVIEW--------------- - render everything below ------------HTML PREVIEW---------------
2. if snapshot content is valid html - render whole snapshot

[std4lqi]

If jest.config.js is used, it works with putting "snapshotSerializers": ["jest-html"] in jest.config.js, at my side.

[sesam]

I got this to work with modern versions of react and react-test-renderer but I don't think it works with testing-library snapshots.