酶浅渲染：使用“模拟”时无法触发/断言值更改

Question

我很难弄清楚如何断言我可以在我的应用程序的输入字段中输入文本。在浏览器中，会发生预期的行为，即当我选择文本并开始输入时，文本会出现在输入中。然而，在我的测试中，期望收到的是“未定义”，而不是像希望的那样返回“a”。

这是我的测试：

import React from 'react'
import { shallow } from 'enzyme';
import Search from './search';

describe('Search', () => {

  const wrapper = shallow(<Search />);

  it('renders without crashing', () => {
    shallow(<Search />);
  });

  it('accepts text in an input', () => {
    const input = wrapper.find('input');
    input.simulate('change', { target: { value: 'a' } });
    expect(input.props().value).toEqual('a');
  });
});

以及实现：

import React, { Component } from 'react';

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText: "Roi"
    };
  }

  inputUpdate (event) {
    this.setState({ searchText: event.target.value});
  }

  render() {
    return(
      <form>
        <input type="text"
               className="card-search"
               placeholder="Type card name"
               onChange={ this.inputUpdate.bind(this) }
               value={ this.state.searchText }/>
      </form>
    );
  };
};

export default Search;

这让我发疯了，我确定我错过了一些简单的东西。谁能帮我解释一下？

Answer 1

我不知道为什么会这样，但似乎是这样......

改变

expect(input.props().value).toEqual('a');

到

expect(wrapper.find('input').props().value).toEqual('a');

Answer 2

您的inputUpdate 不会更新您的组件状态。试试这个：

inputUpdate (e) {
    this.setState({
        searchText: e.target.value
    });
}