Question

我的测试失败，因为我不知道在onChange值中声明什么，

describe("App", function() {
  const wrapper = shallow(<App />);

  it("should have an input", function() {
    expect(
      wrapper.contains(<input type="text" onChange={null} />)
    ).toBeTruthy();
  });
});

我只是在组件中有这个

<input type="text" onChange={this.changeInput} />

Answer 1

我在这里要做的是首先检查输入元素是否存在：

然后，通过验证，分别验证it('verifies that an input element is rendered', () => { expect(wrapper.exists('input')).toBeTruthy(); });函数是否存在。我不是支持在单个onChange语句中进行多次验证的人，这仅仅是因为如果任何it语句触发失败，那么下面的所有expect语句都不会执行。因此，我将使用单独的expect，如下所示：

it

另一种选择是为it('verifies that an onChange function is set`, () => { expect(typeof wrapper.find('input').prop('onChange')).toBe('function'); });道具设置一个模拟函数，并验证它是否被正确调用，如下所示：

onChange

Answer 2

should have an input测试根本不应该涉及onChange。可以类似于the reference的建议进行测试：

expect(wrapper.find('input[type="text"]')).to.have.lengthOf(1);

onChange可以在另一项测试中进行测试，类似于this question中的显示方式。

Answer 3

您可以期待（wrapper.find（'input'）。length）.toBe（1）

不确定语法或函数名称，但是它在那里：）

使用酶进行单元测试：将react道具作为事件传递给包装器

3 个答案: