I'm having problems to test Material UI Tabs with Enzyme and Jest.
The problem is simulating the click on Tab component
I already tried with material shallow method (createShallow) and shallow of enzyme but the results are the same
My console.log on Tab component is returning my target element:
<WithStyles(Tab) label="Tab one" />
Here is my code:
const setup = (newProps) => {
const props = {
selected: 0,
changeTab: jest.fn(),
...newProps
}
const wrapper = shallowUntilTarget(<DashboardTabs { ...props } />, Base)
return {
props,
wrapper
}
}
The shallowUntilTarget is just a code snip to find the component recursively with .dive inside a HOC
https://github.com/airbnb/enzyme/issues/539
it('Should call the onChange function', () => {
const { wrapper, props } = setup()
const tab = wrapper.find({ label: 'Tab One' })
tab.simulate('click')
wrapper.update()
console.log(wrapper.debug()) // I should see a differente content after click in this tab
expect(props.changeTab.mock.calls.length).toBe(1) // the mock function call return 0 on the length
})
And nothing happens :(
You need to use WrappedComponent to dive into HOCs on components:
import { shallow } from 'enzyme';
wrapper = shallow(<DashboardTabs .WrappedComponent {...props} />).dive();
or
You can find an element like this:
wrapper.find(‘withStyles(Tab)’)
Maybe it requires a little tweaks according to your use case. But it would help you
Related
I am testing a component that renders a child component that has the following contextTypes:
Component.contextTypes = {router: PropTypes.object.isRequired}
I am completely new to jest, but coming from mocha/enzyme I've never ran into this problem.
My first test looks like this, and I'm really just messing around with it to see how it works:
it('should exist', () => {
wrapper = renderer.create(<Companies/>);
let tree = wrapper.toJSON();
expect(tree).toMatchScreenshot();
});
When I run the test I get the following error:
Failed context type: The context `router` is marked as required in `ChildComponent`, but its value is `undefined`.
Is there a work around for this, or just something in the docs I'm missing? Thanks in advance!
SOLUTION: For anyone that runs into the same issue, I used the following in a beforeEach():
MyComponent.contextTypes = {
router: function () {
return {
transitionTo: jest.genMockFunction()
};
}
};
I had a similar issue when I was using <Link> in some component, and faced same error as above.
In my case I was using react-router 4.1.1 and solution above didn't work.
I added object and functions into context, but I hope someone give me better solution for this.
describe('SomeComponent', ()=>{
it('renders component', ()=>{
const wrapper = mount(
<SomeComponent />,
{
context: {
router: {
history: {
push: ()=>{},
replace: ()=>{},
createHref: ()=>{},
}
}
},
childContextTypes: {
router: PropTypes.object.isRequired,
}
}
)
expect(wrapper.text()).toContain('some component text')
})
})
I'm using enzyme for mount.
I tried to use enzyme to simulate change event on a checkbox, and use chai-enzyme to assert if it's been checked.
This is my Hello react component:
import React from 'react';
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false
}
}
render() {
const {checked} = this.state;
return <div>
<input type="checkbox" defaultChecked={checked} onChange={this._toggle.bind(this)}/>
{
checked ? "checked" : "not checked"
}
</div>
}
_toggle() {
const {onToggle} = this.props;
this.setState({checked: !this.state.checked});
onToggle();
}
}
export default Hello;
And my test:
import React from "react";
import Hello from "../src/hello.jsx";
import chai from "chai";
import {mount} from "enzyme";
import chaiEnzyme from "chai-enzyme";
import jsdomGlobal from "jsdom-global";
import spies from 'chai-spies';
function myAwesomeDebug(wrapper) {
let html = wrapper.html();
console.log(html);
return html
}
jsdomGlobal();
chai.should();
chai.use(spies);
chai.use(chaiEnzyme(myAwesomeDebug));
describe('<Hello />', () => {
it('checks the checkbox', () => {
const onToggle = chai.spy();
const wrapper = mount(<Hello onToggle={onToggle}/>);
var checkbox = wrapper.find('input');
checkbox.should.not.be.checked();
checkbox.simulate('change', {target: {checked: true}});
onToggle.should.have.been.called.once();
console.log(checkbox.get(0).checked);
checkbox.should.be.checked();
});
});
When I run this test, the checkbox.get(0).checked is false, and the assertion checkbox.should.be.checked() reports error:
AssertionError: expected the node in <Hello /> to be checked <input type="checkbox" checked="checked">
You can see the message is quite strange since there is already checked="checked" in the output.
I'm not sure where is wrong, since it involves too many things.
You can also see a demo project here: https://github.com/js-demos/react-enzyme-simulate-checkbox-events-demo, notice these lines
I think some of the details of my explanation might be a bit wrong, but my understanding is:
When you do
var checkbox = wrapper.find('input');
It saves a reference to that Enzyme node in checkbox, but there are times that when the Enzyme tree gets updated, but checkbox does not. I don't know if this is because the reference in the tree changes and therefore the checkbox is now a reference to a node in an old version of the tree.
Making checkbox a function seems to make it work for me, because now the value of checkbox() is always taken from the most up to date tree.
var checkbox = () => wrapper.find('input');
checkbox().should.not.be.checked();
checkbox().simulate('change', {target: {checked: true}});
///...
It is not bug, but "it works as designed".
Enzyme underlying uses the react test utils to interact with react, especially with the simulate api.
Simulate doesn't actually update the dom, it merely triggers react event handlers attached to the component, possibly with the additional parameters you pass in.
According to the answer I got here (https://github.com/facebook/react/issues/4950 ) this is because updating the dom would require React to reimplement a lot of the browsers functionality, probably still resulting in unforeseen behaviours, so they decided to simply rely on the browser to do the update.
The only way to actually test this is to manually update the dom yourself and then call the simulate api.
Below solution best worked for me:
it('should check checkbox handleClick event on Child component under Parent', () => {
const handleClick = jest.fn();
const wrapper = mount(
<Parent onChange={handleClick} {...dependencies}/>,); // dependencies, if any
checked = false;
wrapper.setProps({ checked: false });
const viewChildren = wrapper.find(Children);
const checkbox = viewChildren.find('input[type="checkbox"]').first(); // If you've multiple checkbox nodes and want to select first
checkbox.simulate('change', { target: { checked: true } });
expect(handleClick).toHaveBeenCalled();
});
Hope this helps.
This is what worked for me:
wrapper.find(CCToggle)
.find('input[type="checkbox"]')
.simulate('change', { target: { checked: true } })
CCToggle is my component.
How do I test input.focus() in enzyme. I am writing the script with react. My code is below:
public inputBox: any;
componentDidUpdate = () => {
setTimeout(() => {
this.inputBox.focus();
}, 200);
}
render() {
return (
<div>
<input
type = 'number'
ref = {element => this.inputBox = element } />
</div>
);
}
You can use mount instead of shallow.
Then you can compare document.activeElement and the input DOM node for equality.
const output = mount(<MyFocusingComponent/>);
assert(output.find('input').node === document.activeElement);
See https://github.com/airbnb/enzyme/issues/316 for more details.
Per React 16.3 updates... using createRef for anyone visiting this post today, if you rearrange the original component to use the new ref api
class InputBox extends PureComponent {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
componentDidMount() {
this.inputRef.current.focus();
}
render() {
return (
<input
ref={this.inputRef}
/>
);
}
}
Then in your test spec
it("Gives immediate focus on to name field on load", () => {
const wrapper = mount(<InputBox />);
const { inputRef } = wrapper.instance();
jest.spyOn(inputRef.current, "focus");
wrapper.instance().componentDidMount();
expect(inputRef.current.focus).toHaveBeenCalledTimes(1);
});
Notice the use of the inputRef.current attribute which references the currently assigned DOM node.
Other approach is to test if element gains focus, i.e. focus() is called on node element. To achieve this, focused element need to be referenced via ref tag like it takes place in your example – reference was assigned to this.inputBox. Consider example below:
const wrapper = mount(<FocusingInput />);
const element = wrapper.instance().inputBox; // This is your input ref
spyOn(element, 'focus');
wrapper.simulate('mouseEnter', eventStub());
setTimeout(() => expect(element.focus).toHaveBeenCalled(), 250);
This example uses Jasmine's spyOn, though you can use any spy you like.
I just had the same issue and solved using the following approach:
My setup is Jest (react-create-app) + Enzyme:
it('should set the focus after render', () => {
// If you don't create this element you can not access the
// document.activeElement or simply returns <body/>
document.body.innerHTML = '<div></div>'
// You have to tell Enzyme to attach the component to this
// newly created element
wrapper = mount(<MyTextFieldComponent />, {
attachTo: document.getElementsByName('div')[0]
})
// In my case was easy to compare using id
// than using the whole element
expect(wrapper.find('input').props().id).toEqual(
document.activeElement.id
)
})
This worked for me when using mount and useRef hook:
expect(wrapper.find('input').get(0).ref.current).toEqual(document.activeElement)
Focus on the particular element can be checked using selectors.
const wrapper = mount(<MyComponent />);
const input = wrapper.find('input');
expect(input.is(':focus')).toBe(true);
Selecting by data-test attribute or something similar was the most straight forward solution I could come up with.
import React, { Component } from 'react'
import { mount } from 'enzyme'
class MyComponent extends Component {
componentDidMount() {
if (this.inputRef) {
this.inputRef.focus()
}
}
render() {
return (
<input data-test="my-data-test" ref={input => { this.inputRef = input } } />
)
}
}
it('should set focus on mount', () => {
mount(<MyComponent />)
expect(document.activeElement.dataset.test).toBe('my-data-test')
})
This should work
const wrapper = mount(<MyComponent />);
const input = wrapper.find('input');
expect(input).toHaveFocus();
Just want to implement the unit test for my react component with using the Jest and Enzyme.
Is there a way to test the order? Let's say I have component Button, and I want to render icon and text at the same time.
And of course it's good to provide the alignment option to the user(Icon first or Children first).
Button.js
class Button extends React.Component {
constructor() {
super();
}
render() {
let content;
const icon = (<Icon type='search' />);
if (this.props.iconAlign === 'right') {
content = (<span>{this.props.children} {icon}</span>
} else {
content = (<span>{icon} {this.props.children}</span>
}
return (
<button>{content}</button>
);
}
}
How to test the iconAlign props with Jest and Enzyme?
Check on the type of the component
Check icon first
var button = TestUtils.renderIntoDocument(<Button />);
var buttonNode = ReactDOM.findDOMNode(button);
expect(buttonNode.props.children[0].type.name).toEqual("Icon")
You could use a shallow render and compare the output. I am not familiar with the Jest syntax so that side of my example may be incorrect (I quickly referred to their website):
import { shallow } from 'enzyme';
describe(`Button`, () => {
it(`should render the icon on the right`, () => {
const children = <div>foo</div>;
const actual = shallow(
<Button iconAlign="right" children={children} />
);
const expected = (
<button><span>{children} <Icon type='search' /></span></button>
);
expect(actual.matchesElement(expected)).toBeTruthy();
});
});
And then you could create another test for the "left" align.
The enzyme version of #pshoukry's answer.
describe(`Button`, () => {
it(`should render icon on the right`, () => {
const wrapper = shallow(
<Button iconAlign="right">
<div>foo</div>
</Button>
);
const iconIsOnRight = wrapper.find('span').childAt(1).is(Icon);
expect(iconIsOnRight).toBeTruthy();
});
});
For reference, here is the enzyme shallow rendering API documentation: https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md
React component:
import React, { Component, PropTypes } from 'react';
export default class Simple extends Component {
render() {
return <div className="Simple">
Result: {this.props.value * 4}
</div>
}
}
Simple.propTypes = {
value: PropTypes.number,
};
Test:
describe('<Simple />', _ => {
it('should display', done => {
const wrapper = shallow(<Simple />);
expect(wrapper.find('div.Simple')).to.have.length(1);
done();
});
it('should quadruple a value passed into it', done => {
const wrapper = shallow(<Simple value={3} />);
expect(wrapper.contains(<div className="Simple">Result: 12</div>)).to.equal(true);
done();
})
});
The first test passes, the second (quadruple a value) fails. I can't figure out what I'm doing wrong here.
EDIT:
If I modify the component to just return this:
return <div className="Simple">
Result:
</div>
And the test as follows:
expect(wrapper.contains(
<div className="Simple">
Result:
</div>
)).to.equal(true);
Then it passes. So it's when I introduce calculating props that the test fails. I'm not really sure why.
This works:
it('should quadruple a value passed into it', done => {
const wrapper = shallow(<Simple value={3} />);
expect(wrapper.contains(<div className="Simple">Result: {12}</div>)).to.equal(true);
done();
})
This is because there are two child elements in the div. You can see this if you use console.log(wrapper.find('div').childAt(1).text()) this gives you 12.
shallow is basically a wrapper for the shallow renderer from react-addons-test-utils. What this does is execute your components render method and returns the resulting react elements. In this case react would create two elements one for Result: and one for 12. Dan Abramov has an excellent post that describes exactly a react element is.
In your test that didn't work you were looking for a div with one text node but what was rendered was a div with two text nodes. By putting 12 in curly braces you have forced it into a new text node