Question

任何人都可以帮我测试酶中的input.focus（）。我正在使用react编写脚本。我的代码如下。

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 更新...如果您重新排列原始组件以使用新的ref api，则使用createRef对今天访问此帖子的任何人进行更新

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

可以使用选择器检查特定元素的焦点。

const wrapper = mount(<MyComponent />);

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

Answer 6

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

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

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

在Enzyme中测试input.focus（）

7 个答案: