我如何input.focus()在酶中进行测试。我正在用 react 编写脚本。我的代码如下：
public inputBox: any;
componentDidUpdate = () => {
setTimeout(() => {
this.inputBox.focus();
}, 200);
}
render() {
return (
<div>
<input
type = 'number'
ref = {element => this.inputBox = element } />
</div>
);
}
您可以使用mount代替浅。然后你可以比较document.activeElement和输入 DOM 节点是否相等。
const output = mount(<MyFocusingComponent/>);
assert(output.find('input').node === document.activeElement);
有关更多详细信息，请参阅https://github.com/airbnb/enzyme/issues/316。
每个React 16.3更新...createRef今天访问这篇文章的任何人都可以使用，如果您重新排列原始组件以使用新的 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}
/>
);
}
}
然后在您的测试规范中
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);
});
请注意inputRef.current引用当前分配的 DOM 节点的属性的使用。
另一种方法是测试元素是否获得焦点，即focus()在节点元素上调用。为了实现这一点，需要通过ref标记引用焦点元素，就像在您的示例中发生的那样 - 引用被分配给this.inputBox. 考虑下面的例子：
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);
此示例使用 Jasmine 的spyOn，但您可以使用任何您喜欢的 spy。
我刚刚遇到了同样的问题并使用以下方法解决了：
我的设置是 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
)
})