我在我的一个小测试项目中有一个简单的 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 为其编写了一个 测试 ：

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 方法似乎未被调用的问题，这应该是测试失败的原因。遗憾的是，我无法弄清楚为什么在测试中未调用此方法。