anthonkendeljest-serializer-pug
Pug Jest snapshot serializer
Installation
Requirements
node>= v10npm>= v5jest>= v22
npm install --save-dev jest-serializer-pugUsage
Once the jest-serializer-pug package is installed, you can use it by specifying the jest-serializer-pug serializer for the snapshotSerializers property in the Jest configuration.
{
"snapshotSerializers": ["jest-serializer-pug"]
}The serializer support values that are of type String or Element. Internally it uses html2pug to convert HTML to Pug template.
Example
html
<div>
<div class="field">
<label class="label">Username</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-success" type="text" placeholder="Text input" value="bulma" />
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
<p class="help is-success">This username is available</p>
</div>
<div class="field">
<label class="label">Message</label>
<div class="control">
<textarea class="textarea" placeholder="Textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" />
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="question" />
Yes
</label>
<label class="radio">
<input type="radio" name="question" />
No
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
</div>
<div class="control">
<button class="button is-link is-light">Cancel</button>
</div>
</div>
</div>pug
div
.field
label.label Username
.control.has-icons-left.has-icons-right
input.input.is-success(type="text", placeholder="Text input", value="bulma")
span.icon.is-small.is-left
i.fas.fa-user
span.icon.is-small.is-right
i.fas.fa-check
p.help.is-success This username is available
.field
label.label Message
.control
textarea.textarea(placeholder="Textarea")
.field
.control
label.checkbox
input(type="checkbox")
|
I agree to the
a(href="#") terms and conditions
.field
.control
label.radio
input(type="radio", name="question")
|
Yes
label.radio
input(type="radio", name="question")
|
No
.field.is-grouped
.control
button.button.is-link Submit
.control
button.button.is-link.is-light CancelContributing
If you want to contribute and make our project better, your help is very welcome.