React 的 TestUtils.Simulate.keyDown 不起作用

Question

我的应用程序中有很多组件响应不同的按键，到目前为止，none 使用 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 是最突出的），但其中 none 有效。我试过使用 keyPress 和 keyUp，不知道这些函数是否存在（对令人惊讶的不完整文档大喊大叫）。

我是不是功能使用不当？还是这里有其他问题？

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

我希望这对遇到类似问题的其他人有所帮助。

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

但没有成功。

但经过一些研究后，我将 keyDown 更改为 keyPress 并且一切正常。原因是，回车键从未真正被按下，因此输入值从未被发送，所有断言都失败了。

React 的 TestUtils.Simulate.keyDown 不起作用

React's TestUtils.Simulate.keyDown does not work

javascript

node.js

karma-runner

reactjs

description.js

描述-test.js