React 的 TestUtils.Simulate.keyDown 不起作用

IT技术 javascript node.js reactjs karma-runner
2021-05-13 10:50:41

我的应用程序中有很多组件可以响应不同的按键，到目前为止，我使用TestUtils.Simulate.keyDown的所有测试都没有工作。似乎keyDown只是简单明了是行不通的。

这是我要测试的组件：

说明.js

var React = require('react/addons');

var Description = React.createClass({
    render : function () {
        return (
            <div className="description">
                <input type="text" ref="input"/>
            </div>
        )
    }
});

module.exports = Description;

这是一个失败的简单测试：

描述-test.js

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var expect = require('expect');
var Description = require('../description');

describe('Description', function () {
    it('updates input value on key press', function () {
        var description = TestUtils.renderIntoDocument(<Description/>);
        var input = React.findDOMNode(description.refs.input);
        expect(input.value).toEqual(''); //This passes
        TestUtils.Simulate.keyDown(input, {key : "a"});
        expect(input.value).toEqual('a'); //This fails
    });
});

我有多个依赖于TestUtils.Simulate.keyDown. 这些测试尝试按下多种不同的键（其中 Enter 是最突出的），但没有一个起作用。我试过使用keyPressand keyUp，但不知道这些函数是否存在（对令人惊讶的不完整文档大喊大叫）。

我只是错误地使用了该功能吗？或者这里还有什么问题？

我正在通过 npm 使用 karma-cli 来运行我的测试，如果这有区别的话。

3个回答

我最终弄清楚了这个问题。

TestUtils.Simulate.keyDown(input, {key : "a"});

此行将事件发送到正确的 DOM 节点，但事件数据实际上并不包含keyCode，而这正是代码要查找的内容。为什么官方文档特别说你应该使用key超出我的范围。

为了使其正常运行，需要进行以下修改：

TestUtils.Simulate.keyDown(input, {keyCode : 65});

我希望这可以帮助其他有类似问题的人。

TestUtils.Simulate实际上并不改变值，而是模拟目标元素上的事件。因此，如果您的 上有onKeyDown处理程序input，则模拟keyDownwithTestUtils可以让您查看该处理程序是否正常工作。

要更改 的值，input您可以尝试直接使用 更改它this.refs.input.value = 'a'，或者如果您有onChange要测试的处理程序，则模拟更改事件：

TestUtils.Simulate.change(input, { target: { value: 'a' } })

只是为了记录，我在 SearchInput 组件中遇到了一个非常相似的问题，该组件发送按 Enter 键时引入的文本。我进行了一些测试，如下所示：

describe('SearchInput functionality,', () => {
  let mockData, component, input;

  beforeAll(() => {
    mockData = {
      searchCriteria: "something",
      emptyString: "       ",
      submitHandler: function(filter) {
        // storing filter param in mockData, it means SearchInput called handler successfully
        mockData.filter = filter;
      }
    };

    spyOn(mockData, 'submitHandler').and.callThrough();

    component = ReactTestUtils.renderIntoDocument(
      <SearchInput placeholder="Search..." onSubmit={mockData.submitHandler}/>
    );
    input = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'input');
  });

  it('user writes a search criteria and hits enter', () => {
    input.value = mockData.searchCriteria;
    ReactTestUtils.Simulate.change(input);
    ReactTestUtils.Simulate.keyDown(input, {key: "Enter", keyCode: 13, which: 13});

    expect(mockData.filter).toEqual(mockData.searchCriteria);
    expect(mockData.submitHandler).toHaveBeenCalled();
    expect(mockData.submitHandler).toHaveBeenCalledTimes(1);
  });
});

它没有用。

但是经过一番研究后，我通过keyPress更改了keyDown，一切正常。原因是，从未真正按下 Enter 键，然后从未发送过输入值并且所有断言都失败了。

其它你可能感兴趣的问题
上一篇React 没有类的有状态组件 下一篇React：在不使用额外的 <div /> 的情况下创建 onClick HOC