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();
Related
I am not sure how to access the props object outside the context of a receiving child, is there any way? Here is a minimal test file (Jest and Enzyme) I setup to experiment with. I get a syntax error where I try to pass this.props.propNumber in:"this is a reserved word"
const React = require("react");
const enzyme = require("enzyme");
const Adapter = require("enzyme-adapter-react-16");
enzyme.configure({ adapter : new Adapter() });
// simple component with an increment method
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = {
testIncrement : 1
};
}
handleIncrement = (incrementSize) => {
this.setState({
testIncrement : this.state.testIncrement += incrementSize
})
};
render() {
return (
<div>
Test
</div>
);
}
}
const wrapper = enzyme.shallow(
<Foo
propNumber={5}
/>
);
test('prop passage into shallow instance', () => {
wrapper.instance().handleIncrement(this.props.propNumber);
expect(wrapper.state('testIncrement')).toEqual(6);
});
You know what the prop is because you are passing it in, why do you need to access it from the class?
const incrementSize = 1;
const propNumber = 5;
const wrapper = enzyme.shallow(
<Foo
propNumber={propNumber}
/>
);
test('prop passage into shallow instance', () => {
wrapper.instance().handleIncrement(incrementSize);
expect(wrapper.state('testIncrement')).toEqual(propNumber + incrementSize);
});
And your handleIncrement function doesn't take an array, so no reason to pass it one.
In your parent component file, export the value, and then in your child component file, import the value
I have these two components:
import { findDOMNode } from 'react-dom';
class Items extends Component {
constructor(props) {
super(props);
this.ref = React.createRef();
this.selectedItemRef = React.createRef();
}
componentDidMount() {
if (this.props.selectedItem) {
this.scrollToItem();
}
}
componentWillReceiveProps(nextProps) {
if (this.props.selectedItem !== nextProps.selectedItem) {
this.scrollToItem();
}
}
scrollToItem() {
const itemsRef = this.ref.current;
const itemRef = findDOMNode(this.selectedItemRef.current);
// Do scroll stuff here
}
render() {
return (
<div ref={this.ref}>
{this.props.items.map((item, index) => {
const itemProps = {
onClick: () => this.props.setSelectedItem(item.id)
};
if (item.id === this.props.selectedItem) {
itemProps.ref = this.selectedItemRef;
}
return <Item {...itemProps} />;
})}
</div>
);
}
}
Items.propTypes = {
items: PropTypes.array,
selectedItem: PropTypes.number,
setSelectedItem: PropTypes.func
};
and
class Item extends Component {
render() {
return (
<div onClick={() => this.props.onClick()}>item</div>
);
}
}
Item.propTypes = {
onClick: PropTypes.func
};
What is the proper way to get the DOM node of this.selectedItemRef in Items::scrollToItem()?
The React docs discourage the use of findDOMNode(), but is there any other way? Should I create the ref in Item instead? If so, how do I access the ref in Items::componentDidMount()?
Thanks
I think what you want is current e.g. this.selectedItemRef.current
It's documented on an example on this page:
https://reactjs.org/docs/refs-and-the-dom.html
And just to be safe I also tried it out on a js fiddle and it works as expected! https://jsfiddle.net/n5u2wwjg/195724/
If you want to get the DOM node for a React Component I think the preferred way of dealing with this is to get the child component to do the heavy lifting. So if you want to call focus on an input inside a component, for example, you’d get the component to set up the ref and call the method on the component, eg
this.myComponentRef.focusInput()
and then the componentRef would have a method called focusInput that then calls focus on the input.
If you don't want to do this then you can hack around using findDOMNode and I suppose that's why it's discouraged!
(Edited because I realized after answering you already knew about current and wanted to know about react components. Super sorry about that!)
I am giving Jest/Enzyme a try, and am having trouble with a simple example I am trying to create.
I have a small component with an input that should update the text of a DIV. I want to write a test proving the DIV got updated.
My test is simply this:
const app = shallow(<App {...state} />);
const input = app.find('input');
input.simulate('keyDown', {keyCode: 72});
input.simulate('keyDown', {keyCode: 73});
input.simulate('change', {target: input});
expect(app.find('[test="mirror"]').text()).toEqual('hi');
I know that the input is actually returning a ShallowWrapper. You can see in my component below, I am updating state by looking at e.target.value. Is there a way to pass the actual DOM node to my simulation of change? Will simulating the keyDown actually update the input value? Or should I do that a different way?
import React from 'react'
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
mirror: ''
};
this.updateMirror = this.updateMirror.bind(this);
}
updateMirror(e) {
let val = e.target.value;
this.setState((prevState, props) => {
return {
mirror: val
};
});
}
render() {
return <div>
<div><input type="text" onChange={this.updateMirror} /></div>
<div test="mirror">{this.state.mirror}</div>
</div>
}
}
export default App
Try something like this :
const wrapper = shallow(<App {...state} />);
wrapper.find('input').simulate('change', {target: {value: 'Your new Value'}});
expect(wrapper.state('mirror')).toBe('Your new Value');
I have a component Demo whose Label depends on the current value of a field in the redux-form state. I am using formValueSelector to get the current value of "param" field from the form state. It works fine. However, while running npm test, the selector function always returns undefined. How can I mock it?
Please let me know if I am doing this in a wrong way.
I have a component like
class Sample extends React.Component {
render() {
const {param, state} = this.props;
const selector = formValueSelector('sampleform');
return (
<div>
<Demo
name="name"
label={selector(state, `${param}`)}
/>
</div>
);
}
}
export default Sample;
and, testing code is like
function setup() {
const spy = jest.fn();
const store = createStore(() => ({}));
const Decorated = reduxForm({ form: 'sampleform' })(Sample);
const props = {
"param":"keyOfState",
"state":{"keyOfState":"Label"}
}
const mockedComponent = <Provider store={store}>
<MuiThemeProvider muiTheme={MuiStyles()}>
<Decorated {...props}>
<span></span>
</Decorated>
</MuiThemeProvider>
</Provider>;
return {
props,
mockedComponent}
}
describe('Sample Component', () => {
it('should render the snapshot', () => {
const { mockedComponent } = setup()
const tree = renderer.create(
mockedComponent
).toJSON();
expect(tree).toMatchSnapshot();
});
});
You aren't providing the formValueSelector with an adequate mock for the state that the selector expects.
Solution: The selector expects the global state object provided by redux. The current mocked state doesn't reflect this. Changing the mock to the shape expected fixes the issue:
It is of this shape:
{
form: {
sampleform: {
values: {
keyOfState: "Label"
}
}
}
}
Note: the object stored at the sampleform key includes more entries, but they are irrelevant for the mock.
Here is a link to a reproduction that resolves your issue:https://github.com/mjsisley/reduxFormMockIssue
Please note: I was directed here by Matt Lowe. I am the developer that has worked with him on a number of other projects.
For anyone in the future - if for some reason you actually need to mock FormValueSelector, I just exported a wrapper for it from my Helpers module:
export const tableTypeSelector = formValueSelector('toggle')
and then mocked that:
import * as Helpers from 'helpers'
...
stub = sinon.stub(Helpers, 'tableTypeSelector').returns('charges')
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