在酶中测试 input.focus()

Question

如何测试 input.focus() 酶。我正在用反应编写脚本。我的代码如下：

public inputBox: any;

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

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

Answer 1

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

const output = mount(<MyFocusingComponent/>);

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

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

Answer 2

另一种方法是测试元素是否获得焦点，即在节点元素上调用 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，但您可以使用任何您喜欢的间谍。

Answer 3

我刚遇到同样的问题并使用以下方法解决了：

我的设置是 Jest (react-create-app) + 酶：

    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
      )
    })

Answer 4

根据 React 16.3 更新...使用 createRef 今天访问此 post 的任何人，如果您重新排列原始组件以使用新引用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 属性的使用。

Answer 5

这在使用 mount 和 useRef 钩子时对我有用：

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

Answer 6

通过 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')
})

Answer 7

可以使用选择器检查对特定元素的关注。

const wrapper = mount(<MyComponent />);

const input = wrapper.find('input');
expect(input.is(':focus')).toBe(true);

Answer 8

这应该有效

const wrapper = mount(<MyComponent />);

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

expect(input).toHaveFocus();

在酶中测试 input.focus()

Testing input.focus() in Enzyme

onfocus

typescript

reactjs

enzyme