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.

[std4lqi]

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