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

Question

我有一个输入，当按下“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 prop上设置文本输入状态。 从onKeyPress调用的方法是获取languageEntry值并更新状态中的语言数组。

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

这是失败测试的屏幕截图。

Answer 1

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

 const wrapper = mount(<Form />);

由于您正在收听组件中的onKeyPress，因此为什么不模拟keypress事件：

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

Answer 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}