jest-html
jest-html copied to clipboard
guigrpa
HTML preview doesn't work
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="[email protected]"
>
</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?
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?).
"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
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"
}
},
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
~~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();
I'm still having this problem with v1.5.0:
"jest": "22.4.3" (provided by "react-scripts": "[email protected]"),
"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()
})
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.
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>
`;
maybe it's possible to change client application to render snapshot IF:
- if snapshot content has
------------HTML PREVIEW---------------- render everything below------------HTML PREVIEW--------------- - if snapshot content is valid html - render whole snapshot
If jest.config.js is used, it works with putting "snapshotSerializers": ["jest-html"] in jest.config.js, at my side.
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.
