Question

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

这是我要测试的组件：

description.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是最突出的），但它们都不起作用。我尝试过使用keyPress和keyUp，而不知道这些功能是否存在（对于令人惊讶的不完整文档而言）。

我只是错误地使用了这个功能吗？或者这里有什么不对吗？

我正在通过npm使用karma-cli来运行我的测试，如果这有所不同。

Answer 1

我最终搞清了这个问题。

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

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

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

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

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

Answer 2

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

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

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

Answer 3

仅仅为了记录，我在SearchInput组件中遇到了一个非常类似的问题，它发送了在输入时引入的文本。我有一些测试如下：

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 ，一切都运行良好。原因，输入键从未实际按下，然后输入值从未发送，所有断言都失败。

React的TestUtils.Simulate.keyDown不起作用

description.js

描述-test.js

3 个答案: