reactjs - 在 Enzyme 中测试 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而不是浅。然后你可以比较document.activeElement和输入 DOM 节点是否相等。

const output = mount(<MyFocusingComponent/>);

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

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

Answer 2

每个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 节点的属性的使用。

Answer 3

另一种方法是测试元素是否获得焦点，即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 4

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

我的设置是 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
      )
    })

Answer 5

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

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

Answer 6

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

const wrapper = mount(<MyComponent />);

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

Answer 7

按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 8

这应该工作

const wrapper = mount(<MyComponent />);

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

expect(input).toHaveFocus();