should-enzyme
should.js assertions for enzyme
- Install
- Setup
- Assertions
attr(key, [value])
checked()
className(string)
contain(node)
containsText(string)
data(key, [value])
disabled()
exactClassNames(string)
present()
prop(key, [value])
props(object)
state(key, [value])
text(string)
value(string)
- Contribute
Install
npm i should-enzyme --save-dev
Setup
Install Enzyme JS
;;
Assertions
attr(key, [value])
render | mount | shallow |
---|---|---|
yes | yes | yes |
Check to see if element has attribute and optionally check value.
;; const AttrFixture = <div title=title>content</div>; AttrFixturepropTypes = children: PropTypesnode title: PropTypesstring; const wrapper = ; wrappershouldhave;wrappershouldhave;wrappershouldnothave;wrappershouldnothave;
checked()
render | mount | shallow |
---|---|---|
yes | yes | yes |
Check to see if input type checkbox is checked.
;; const CheckedFixture = <div> <input id="coffee" type="checkbox" defaultChecked value="coffee" /> <input id="tea" type="checkbox" value="tea" /> </div>; const wrapper = ;const coffee = wrapper;const tea = wrapper; coffeeshouldchecked;teashouldnotbechecked;
className(string)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Check to see if wrapper has css class.
;; const ClassNameFixture = <div className="special burger">Content here</div>; const wrapper = ; wrappershouldhaveclassName"special";wrappershouldnothaveclassName"pizza";
contain(node)
render | mount | shallow |
---|---|---|
no | yes | yes |
Check to see if wrapper contains the expected node.
;; const Banana = { return <div>Banana</div>;}; const Apple = { return <div>Apple</div>;}; const ContainNodesFixture = { return <div> <Apple name="Jim" /> <Apple name="Bob" /> </div> ;}; const wrapper = ; wrappershould;wrappershouldnotbe;
containsText(string)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Check to see if wrapper contains text.
;; const TextFixture = <div>Content here More content</div>; cont wrapper = ; wrappershould;wrappershouldnot;
data(key, [value])
render | mount | shallow |
---|---|---|
yes | yes | yes |
Check to see if element has a data attribute and optionally check value.
;; const DataFixture = <div data-tr=tr data-id="special-id"> content </div>; DataFixturepropTypes = children: PropTypesnode tr: PropTypesstring; const wrapper = ; wrappershouldhavedata"tr";wrappershouldhavedata"tr" "enzyme";wrappershouldnothavedata"pizza";wrappershouldnothavedata"tr" "stuff";
disabled()
render | mount | shallow |
---|---|---|
yes | yes | yes |
Check to see if input fields are disabled.
;; const DisabledFixture = <div> <input id="coffee" type="text" value="coffee" /> <input id="tea" type="text" disabled value="tea" /> </div>; const wrapper = ;const coffee = wrapper;const tea = wrapper; coffeeshouldnotbedisabled;teashouldbedisabled;
exactClassNames(string)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Check to see if wrapper has the exact class names.
;; const ClassNamesFixture = <div className="special buffalo chicken burger">Content here</div>; cont wrapper = ; wrappershouldhave;wrappershouldnothave;wrappershouldnothave;
present()
render | mount | shallow |
---|---|---|
yes | yes | yes |
Check to see if the wrapper is present.
;; const PresentFixture = <div> <div id="burgers">with cheese</div> <div>side of fries</div> </div>; const wrapper = ;const burgers = wrapper;const salad = wrapper; burgersshouldbe;saladshouldnotbe;
Exception: Using render
only with Enzyme 3 means null
components are not classed as "present".
This is related to the cheerio wrapper v1 being returned.
See example below:
;; const PresentFixture = null; const wrapperMount = ;wrapperMountshouldbe; // true const wrapperRender = ;wrapperRendershouldbe; // false
prop(key, [value])
render | mount | shallow |
---|---|---|
no | yes | yes |
Check to see if wrapper has prop and optionally check value.
;; const PropFixture = <div id=id>salad</div>; const wrapper = ; wrappershouldhave;wrappershouldnothave; wrappershouldhave;wrappershouldnothave;// assert objectswrappershouldhave; wrappershouldnothave;
props(object)
render | mount | shallow |
---|---|---|
no | yes | yes |
Check to see if wrapper has props and value. This uses shouldJS deepEqual
assert.
;; const PropsFixture = <div id=id title=title total=total> content </div>; const wrapper = ; wrappershouldhave;wrappershouldhave; wrappershouldnothave;wrappershouldnothave; wrappershouldhave; // will error require object
state(key, [value])
render | mount | shallow |
---|---|---|
no | yes | yes |
Check to see if wrapper has state property and optionally check value.
;; { super; thisstate = bestFruit: "mango" ; } { return <div id="best-mangos">thisstatebestFruit</div>; } const wrapper = ; wrappershouldhave;wrappershouldnothave; wrappershouldhave;wrappershouldnothave; wrappershouldnothave;
text(string)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Check to see if the exact text content is in wrapper.
;; const TextFeature props => <div id='text-feature'> <span id='text-span'>Test</span> </div> ; const wrapper = ; wrappershouldhavetext'Test'; wrappershouldnothavetext'Other text';
value(string)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert on input field values this includes <input>
, <select>
and <textarea>
.
;; const FormInputsFixture = <form> <input type="text" name="mug" defaultValue="coffee" /> <select defaultValue="pizza"> <option value="coffee">More coffee</option> <option value="pizza">Pizza</option> <option value="salad">Salad</option> </select> <textarea name="fruit" value="Hands or bunch of bananas?" /> <div id="failSelect">What value?</div> </form>); const wrapper = ; wrappershouldhavevalue"coffee";wrappershouldnothavevalue"pizza"; wrappershouldhavevalue"pizza";wrappershouldnothavevalue"salad"; wrappershouldhavevalue"Hands or bunch of bananas?";wrappershouldnothavevalue"Mangoes";