带有酶参数的模拟处理程序方法

Question

我已经编写了绑定到onChange元素的input事件的处理程序方法，它需要两个参数

<div className="p-lg-12">
    <InputText
        value={this.state.blog.title}
        id="title"
        placeholder="Blog Title"
        onChange={e =>
            this.handleInput("title", e.target.value)
        }
    />
</div>

基于第一参数，我更改状态对象管理的对象中特定字段的值

handleInput(key, value) {
    let blogData = Object.assign({}, this.state.blog);
    blogData[key] = value;
    this.setState({ blog: blogData });
}

我无法在酶中simulate此方法

it("updates blog data with user input", () => {
    const blogEditor = shallow(<BlogEditor />);
    blogEditor
        .find({ placeholder: "Blog Title" })
        .simulate("onChange", ("title", { target: { value: "x" } }));
    expect(blogEditor.state().blog.title).toEqual("x");
});

产生的错误是

expect(received).toEqual(expected) // deep equality

Expected: "x"
Received: ""

  45 |             .find({ placeholder: "Blog Title" })
  46 |             .simulate("onChange", ("title", { target: { value: "x" } }));
> 47 |         expect(blogEditor.state().blog.title).toEqual("x");
     |                                               ^
  48 |     });
  49 | });
  50 |

  at Object.<anonymous> (resources/js/tests/BlogEditor/BlogEditor.test.js:47:47)

所以我可以正确地将参数传递给处理程序方法吗？

也可以是find方法，到目前为止我尝试过的方法都没有返回正确的元素

• [find('#title')，因为title是HTML ID
• find({ placeholder: "Blog Title" })作为此组件作为5输入每个组件都有唯一的id属性和占位符属性值。

Answer 1

在浅层渲染上使用Simulation时，事件处理程序应位于该节点上，因为浅层无法正常传播。由于测试与BlogEditor相关，而不与Input相关，因此我建议使用mount()而不是shallow()。

Answer 2

因此有两个更改，例如正确地提到了@ shaun-e-tobias，在这种情况下，我们应该使用mount；并且我添加了一个at方法，因为find返回了一个数组，似乎将测试更新为