Question

我很难弄清楚如何断言我可以在我的应用中输入文字到输入字段。在浏览器中，会出现预期的行为，即当我选择文本并开始键入时，文本会出现在输入中。但是在我的测试中，而不是返回＆＃39;如所希望的那样，期望得到了“未定义”。

这是我的测试：

＆＃13;

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

＆＃13;

实施：

＆＃13;

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;

＆＃13;

这让我发疯，我确信我错过了一些简单的事情。有人可以为我解释一下吗？

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

酶浅渲染：使用＆＃39;模拟＆＃39;时无法触发/断言值变化

2 个答案: