在酶中测试input.focus（）

任何人都可以帮助我测试酶中的input.focus（）。我正在写剧本与react.My代码如下。在酶中测试input.focus（）

public inputBox: any; 

componentDidUpdate =() => { 
    setTimeout(() => { 
     this.inputBox.focus(); 
    }, 200); 
} 

render() { 
    return (
     <div> 
      <input 
       type = 'number' 
       ref = {element => this.inputBox = element } /> 
     </div> 
    ); 
}

来源

2016-06-08 Sachin

其他方法是测试元素是否获得焦点，即在节点元素上调用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);

此示例使用茉莉花spyOn，但你可以在任何间谍你喜欢。

来源

2017-03-14 14:10:12 mckomo

'eventStub（）'从哪里来？ –

'eventStub'是任何能够让你的测试通过的东西。在这个例子中，你可以假定组件'FocusingInput'正在监听'mouseEnter'事件，并且当这个事件被触发时（'wrapper.simulate（'mouseEnter'，...）'这么做）事件处理器可以对事件执行一些操作像'preventDefault'。为了使这个工作，你需要准备事件存根来处理这个操作，并发送这个存根作为'simulate'的第二个参数。以下是我的[活动存根]（https://gist.github.com/mckomo/128bdb43434749ca1a2299d456ed7d7c）的示例。 – mckomo

您可以使用mount代替浅。然后你可以比较document.activeElement和输入的DOM节点是否相等。

const output = mount(<MyFocusingComponent/>); 

assert(output.find('input').node === document.activeElement);

有关更多详细信息，请参见https://github.com/airbnb/enzyme/issues/316。

来源

2016-07-15 19:44:21 whatknight

为我工作。为了清楚起见，需要全局的'window'和'document'对象来挂载工作。为了这个目的，我在第一个'describe'之前使用了下面的代码：'从jsdom'导入jsdom; const doc = jsdom.jsdom（'<！doctype html>'）; global.document = doc; global.window = doc.defaultView;' – Ejaz

对于Jest，请确保在CLI中设置了'--env = jsdom'，或者在jest config中设置了''testEnvironment“：”jsdom“'，那么您不需要导入它 – WickyNilliams

在酶中测试input.focus（）

回答

相关问题