Question

我的一个小型测试项目中有一个简单的SearchBar组件。此SearchBar主要由文本输入和按钮组成，按钮单击使用输入字段中的文本执行回调。

我的Searchbar.render方法如下所示：

  return (
    <FormGroup controlId="keywords">
      <InputGroup>
        <FormControl type="text"
                     placeholder="Keywords…"
                     value={this.state.keywords}
                     onChange={this.updateKeywords} />
        <InputGroup.Button
          onClick={() => {this.props.onSearch(this.state.keywords);}}
          ref="searchInput">
          <Button ref="searchButton">
            <Glyphicon glyph="search"/>
          </Button>
        </InputGroup.Button>
      </InputGroup>
    </FormGroup>
  );

我使用jest写了test：

it("should adjust keywords and trigger onSearch correctly", () => {
  const handleSearch = jest.fn();

  const searchBar = ReactTestUtils.renderIntoDocument(
    <Searchbar onSearch={handleSearch}/>
  );
  expect(searchBar.state.keywords).toBe("");

  const button = ReactDOM.findDOMNode(searchBar.refs.searchButton);
  const input = ReactDOM.findDOMNode(searchBar.refs.searchInput);

  ReactTestUtils.Simulate.change(input, {target: {value: "test"}});

  ReactTestUtils.Simulate.click(button);
  expect(handleSearch).toHaveBeenCalledWith("test");
});

现在，此测试中的回调有效，并且callMe中存储的函数按预期调用。 SearchBar也适用于我的应用程序，所以我认为SearchBar代码是正确的。但是当我使用npm test来运行我的测试时，测试失败了：

expect(jest.fn()).toHaveBeenCalledWith(expected)

Expected mock function to have been called with:
  ["test"]
But it was called with:
  [""]

在评论中Andreas Köberle向我指出了updateKeywords方法似乎没有被调用的问题，这应该是测试失败的原因。遗憾的是，我无法弄清楚为什么在测试中没有调用这种方法。

Answer 1

您必须自己传递事件数据，因为它并不真正触发DOM元素上的事件。来自文档：

您必须提供您在其中使用的任何活动属性组件（例如keyCode，等等......）作为React没有创建任何这些对你来说。

将一个间谍函数作为回调放入组件中也很常见，并在模拟事件后对其进行测试。

const handleSearch = jest.fn();
const searchBar = ReactTestUtils.renderIntoDocument(
    <Searchbar onSearch={handleSearch}/>
);
ReactTestUtils.Simulate.change(input, {target: {value: 'test'}});
expect(handleSearch).toHaveBeenCalledWith('test')

使用react和jest测试文本输入

1 个答案: