Question

免责声明：我将 Preact 用作lib，将enzyme-adapter-preact-pure用作酶的适配器。

我编写了以下函数：

function handleInputChange(e) {
  const target = e.target,
    value = target.type === 'checkbox' ? target.checked : target.value;
  this.setState({ [target.name]: value });
}

此功能独立，可以在React的内部使用像这样的组件实例：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: null
    };

    this.handleInputChange = handleInputChange.bind(this);
  }

  render() {
    return <input name="name" onChange={this.handleInputChange} />;
  }
}

这样，我不需要在每个需要处理输入更改的组件上重新实现它。

问题：

由于我依赖event.target及其属性，因此我不知道如何使用酶对其进行测试，因为我无法根据需要设置target和那些属性：

// Test file
// Consider `wrapper` as an instance of `App` shown above, mounted with Enzyme's `mount` function.

test('it changes the correspondent state key when input is changed', () => {
  wrapper.find('input').simulate('change', { target: { value: 'foo', name: 'name' } });
  expect(wrapper.state('name')).toEqual('foo');
});

尝试此操作会引发错误：TypeError: Cannot set property target of [object Event] which has only a getter at Function.assign (<anonymous>)

Answer 1

由于您不仅依赖target.value，因此还需要传递覆盖所有基础的适当模拟。

下面的代码应该解决它。

wrapper.find('input').simulate('change', {
  target: {
    value: 'foo',
    name: 'name',
    checked: true,
    type: 'checkbox'
  }
});

// OR

// In this case there will be no checkbox found and this it wont look for checked value present or not
wrapper.find('input').simulate('change', {
  target: {
    value: 'foo',
    name: 'name'
  }
});

酶–测试事件处理函数，需要一个任意的target属性

问题：

1 个答案: