Jest / Enzyme 没有正确模拟我的组件方法？答案

【问题标题】：Jest / Enzyme not properly simulating my component method?Jest / Enzyme 没有正确模拟我的组件方法？
【发布时间】：2017-11-29 02:16:47
【问题描述】：

我有一个输入，当按下“enter”键时，使用“onKeyPress”我想设置一些状态。它所做的是通过添加新的输入值来更新状态中的语言数组。

该功能有效，但测试失败。这是我的代码。

这是调用“onKeyPress”时调用的函数。

  onLanguagesChange = e => {
    if (e.charCode === 13 && this.state.languageEntry) {
      e.preventDefault();
      const language = this.state.languageEntry;
      const languages = [...this.state.languages, language];
      this.setState(() => ({ languages, languageEntry: '' }));
    }
  };

这是测试

test('it should set languages when enter key is pressed on languages input', () => {
  const value = 13;
  const wrapper = shallow(<Form />);
  wrapper.setState({ languageEntry: 'Python' });
  wrapper.setState({ languages: ['JavaScript'] });
  wrapper
    .find('input')
    .at(1)
    .simulate('keydown', {
      charCode: { value }
    });
  expect(wrapper.state('languages')).toBe(['JavaScript', 'Python']);
});

这是组件内部的输入。 onChange 方法只是将 languageEntry 属性上的文本输入设置为状态。从 onKeyPress 调用的方法是获取 languageEntry 值并更新状态上的语言数组。

<input
  type="text"
  className="text-input"
  value={this.state.languageEntry}
  onKeyPress={this.onLanguagesChange}
  placeholder="Programming languages"
  onChange={this.onLanguageChange}
/>

这是失败测试的截图。

【问题讨论】：

你能确定测试找到的输入是正确的吗？也许更好的选择器（使用 .text-input）或名称会更好？
我只是尝试添加它自己唯一的类名并改用它。仍然是同样的失败测试。
我认为您不需要将value 括在花括号中。通过这样做，您传递一个对象而不是一个 int 值

标签： reactjs jestjs enzyme

【解决方案1】：

您需要使用mount 而不是shallow 才能使simulate 工作

 const wrapper = mount(<Form />);

既然你在你的组件中监听onKeyPress，为什么不模拟一个keypress事件呢：

 wrapper
    .find('input')
    .at(1)
    .simulate('keypress', {
      charCode: { value }
    });

【讨论】：

将其更改为挂载以及模拟按键。还是失败了。这很奇怪。
你能调试它看看发生了什么。还有你为什么用this.setState(() => ({ languages, languageEntry: '' }));而不是this.setState({ languages, languageEntry: '' });
显然使用函数返回新状态是一种在 React 社区中成为标准的做法。我不知道究竟是为什么，但现在看到它被大量使用了。

【解决方案2】：

尝试删除 value 中的花括号

test('it should set languages when enter key is pressed on languages input', () => {
  const value = 13;
  const wrapper = shallow(<Form />);
  wrapper.setState({ languageEntry: 'Python' });
  wrapper.setState({ languages: ['JavaScript'] });
  wrapper
    .find('input')
    .at(1)
    .simulate('keydown', {
      charCode: value
    });
  expect(wrapper.state('languages')).toBe(['JavaScript', 'Python']);
});

通过将其包裹在花括号中，您将创建一个增强的对象字面量，看起来像 {value: 13} 而不仅仅是 13

【讨论】：

尝试不带卷曲，仍然没有运气。嗯