web-dev-qa-db-ja.com

Enzymeでinput.focus（）をテストする

誰でも酵素でinput.focus（）をテストするのを手伝ってもらえますか？私はreactでスクリプトを書いています。私のコードは以下です。

public inputBox: any;

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

render() {
    return (
        <div>
            <input
                type = 'number'
                ref = {element => this.inputBox = element } />
        </div>
    );
}
reactjstypescriptenzyme
16
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);

この例ではJasmineの spyOn を使用していますが、任意のスパイを使用できます。

7
mckomo

浅いの代わりにmountを使用できます。次に、document.activeElementおよび入力DOMノードが等しいかどうか。

const output = mount(<MyFocusingComponent/>);

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

詳細については、 https://github.com/airbnb/enzyme/issues/316 を参照してください。

20
whatknight

PerReact 16.3update ... using createRef を使用して元のコンポーネントを再配置すると、この投稿に今日アクセスした人は新しい参照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);
});

現在割り当てられているDOMノードを参照するinputRef.current属性の使用に注意してください。

9
Prancer

mountおよびuseRefフックを使用すると、これはうまくいきました。

expect(wrapper.find('input').get(0).ref.current).toEqual(document.activeElement)
1
Emi

私はちょうど同じ問題を抱えていて、次のアプローチを使用して解決しました：

私のセットアップは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
      )
    })
1
thiagoxvo

特定の要素に焦点を合わせるには、セレクタを使用して確認できます。

const wrapper = mount(<MyComponent />);

const input = wrapper.find('input');
expect(input.is(':focus')).toBe(true);
1
Kamil Perczyński

data-test属性などで選択することが、私が思いつく最も簡単な解決策でした。

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')
})
0
Trevor Litsey