blocks|key|1056290|text|您可以使用mount而不是浅层。然后，您可以比较document.activeElement和输入DOM节点是否相等。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1056291|const+output+=+mount(<MyFocusingComponent/>);

assert(output.find('input').node+===+document.activeElement);|code-block|syntax|javascript|1056292|有关更多详细信息，请参阅https://github.com/airbnb/enzyme/issues/316。|1056293|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/airbnb/enzyme/issues/316^0|5|5|O|M|0|0|C|17|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

You can use <code>mount</code> instead of shallow.
Then you can compare <code>document.activeElement</code> and the input DOM node for equality.

<pre><code>const output = mount(&lt;MyFocusingComponent/&gt;);

assert(output.find('input').node === document.activeElement);
</code></pre>

See <a href="https://github.com/airbnb/enzyme/issues/316" rel="noreferrer">https://github.com/airbnb/enzyme/issues/316</a> for more details.

blocks|key|1306832|text|另一种方法是测试元素是否获得焦点，即在节点元素上调用focus()。为了实现这一点，需要像在示例中那样通过ref标记引用聚焦元素--将引用分配给this.inputBox。考虑下面的例子：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1306833|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);|code-block|syntax|javascript|1306834|这个例子使用茉莉花的spyOn，尽管你可以使用任何你喜欢的间谍。|1306835|entityMap|0|LINK|mutability|MUTABLE|url|https://jasmine.github.io/2.0/introduction.html#section-Spies^0|Q|7|1H|3|20|D|0|0|A|5|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Other approach is to test if element gains focus, i.e. <code>focus()</code> is called on node element. To achieve this, focused element need to be referenced via <code>ref</code> tag like it takes place in your example – reference was assigned to <code>this.inputBox</code>. Consider example below:

<pre><code>const wrapper = mount(&lt;FocusingInput /&gt;);
const element = wrapper.instance().inputBox; // This is your input ref

spyOn(element, 'focus');

wrapper.simulate('mouseEnter', eventStub());

setTimeout(() =&gt; expect(element.focus).toHaveBeenCalled(), 250);
</code></pre>

This example uses Jasmine's <a href="https://jasmine.github.io/2.0/introduction.html#section-Spies" rel="noreferrer">spyOn</a>, though you can use any spy you like.

blocks|key|2060279|text|我只是遇到了同样的问题，并使用以下方法解决了问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2060280|我的设置是Jest+(反作用-创建-应用程序)%2B酶：|2060281|++++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
++++++)
++++})|code-block|syntax|javascript|2060282|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I just had the same issue and solved using the following approach:

My setup is Jest (react-create-app) + Enzyme:

<pre><code> it('should set the focus after render', () =&gt; {
 // If you don't create this element you can not access the 
 // document.activeElement or simply returns &lt;body/&gt;
 document.body.innerHTML = '&lt;div&gt;&lt;/div&gt;'

 // You have to tell Enzyme to attach the component to this
 // newly created element
 wrapper = mount(&lt;MyTextFieldComponent /&gt;, {
 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
 )
 })
</code></pre>

blocks|key|2060322|text|响应16.3更新..。如果您重新安排原始组件以使用新的ref+api，则今天访问此帖子的任何人都可以使用createRef。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2060323|class+InputBox+extends+PureComponent+{
++++constructor(props)+{
++++++++super(props);
++++++++this.inputRef+=+React.createRef();
++++}
++++componentDidMount()+{
++++++++this.inputRef.current.focus();
++++}
++++render()+{
++++++++return+(
++++++++++++<input
++++++++++++++++ref={this.inputRef}
++++++++++++/>
++++++++);
++++}
}|code-block|syntax|javascript|2060324|然后在你的测试规范中|2060325|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);
});|2060326|注意inputRef.current属性的使用，它引用当前分配的DOM节点。|2060327|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/refs-and-the-dom.html#creating-refs^0|0|6|1G|9|1G|9|0|0|0|0|0|2|G|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|D]]|E|@$9|14|A|15|1|16]]|F|$]]|$1|G|3|H|5|I|7|17|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|18|8|@]|E|@]|F|$]]|$1|N|3|O|5|I|7|19|8|@]|E|@]|F|$J|K]]|$1|P|3|Q|5|6|7|1A|8|@$9|1B|A|1C|B|D]]|E|@]|F|$]]|$1|R|3|-4|5|6|7|1D|8|@]|E|@]|F|$]]]|S|$T|$5|U|V|W|F|$X|Y]]]]

Per React 16.3 updates... using <a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs" rel="noreferrer"><code>createRef</code></a> for anyone visiting this post today, if you rearrange the original component to use the new ref api

<pre><code>class InputBox extends PureComponent {
 constructor(props) {
 super(props);
 this.inputRef = React.createRef();
 }
 componentDidMount() {
 this.inputRef.current.focus();
 }
 render() {
 return (
 &lt;input
 ref={this.inputRef}
 /&gt;
 );
 }
}
</code></pre>

Then in your test spec

<pre><code>it("Gives immediate focus on to name field on load", () =&gt; {
 const wrapper = mount(&lt;InputBox /&gt;);
 const { inputRef } = wrapper.instance();

 jest.spyOn(inputRef.current, "focus");

 wrapper.instance().componentDidMount();
 expect(inputRef.current.focus).toHaveBeenCalledTimes(1);
});
</code></pre>

Notice the use of the <code>inputRef.current</code> attribute which references the currently assigned DOM node.

blocks|key|2060363|text|在使用mount和useRef钩子时，这对我起了作用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2060364|expect(wrapper.find('input').get(0).ref.current).toEqual(document.activeElement)|code-block|syntax|javascript|2060365|entityMap^0|3|5|9|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

This worked for me when using <code>mount</code> and <code>useRef</code> hook:

<pre><code>expect(wrapper.find('input').get(0).ref.current).toEqual(document.activeElement)
</code></pre>

blocks|key|2060382|text|通过data-test属性或类似的方法进行选择是我能想到的最直接的解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2060383|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')
})|code-block|syntax|javascript|2060384|entityMap^0|2|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Selecting by <code>data-test</code> attribute or something similar was the most straight forward solution I could come up with.

<pre><code>import React, { Component } from 'react'
import { mount } from 'enzyme'

class MyComponent extends Component {
 componentDidMount() {
 if (this.inputRef) {
 this.inputRef.focus()
 }
 }

 render() {
 return (
 &lt;input data-test="my-data-test" ref={input =&gt; { this.inputRef = input } } /&gt;
 )
 }
}

it('should set focus on mount', () =&gt; {
 mount(&lt;MyComponent /&gt;)
 expect(document.activeElement.dataset.test).toBe('my-data-test')
})
</code></pre>

blocks|key|1056339|text|可以使用选择器检查特定元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1056340|const+wrapper+=+mount(<MyComponent+/>);

const+input+=+wrapper.find('input');
expect(input.is(':focus')).toBe(true);|code-block|syntax|javascript|1056341|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Focus on the particular element can be checked using selectors.

<pre><code>const wrapper = mount(&lt;MyComponent /&gt;);

const input = wrapper.find('input');
expect(input.is(':focus')).toBe(true);
</code></pre>

blocks|key|2060392|text|这应该能行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2060393|const+wrapper+=+mount(<MyComponent+/>);

const+input+=+wrapper.find('input');

expect(input).toHaveFocus();|code-block|syntax|javascript|2060394|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This should work
<pre class="lang-js prettyprint-override"><code>const wrapper = mount(&lt;MyComponent /&gt;);

const input = wrapper.find('input');

expect(input).toHaveFocus();
</code></pre>

How do I test <code>input.focus()</code> in enzyme. I am writing the script with react. My code is below:
<pre><code>public inputBox: any;

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

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

Testing input.focus() in Enzyme

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何在酶中检测input.focus()。我在用反应来写剧本。我的代码如下：public inputBox: any;componentDidUpdate = () => {    setTimeout(() => {        this.inputBox.focus();    }, 200);}render()...

问在酶中检测input.focus()
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在酶中检测input.focus()EN