Javascript 在酶中用参数模拟handler方法

我已经编写了一个绑定到

input

元素的

onChange

事件的处理程序方法，它需要两个参数

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

我无法在酶中模拟这种方法

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");
});

it（“使用用户输入更新博客数据”，（）=>{
const blogEditor=shallow（）；
博客编辑
.find（{占位符：“博客标题”}）
.simulate（“onChange”，（“title”，{target:{value:{x}}]）；
expect（blogeeditor.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)

expect（已接收）.toEqual（预期）//深度相等
预期：“x”
收到：“”
45 |.查找（{占位符：“博客标题”}）
46 |。模拟（“onChange”（“title”），{target:{value:{x}}）；
>47 | expect（blogeeditor.state（）.blog.title）.toEqual（“x”）；
|                                               ^
48 |     });
49 | });
50 |
反对。（参考资料/js/tests/BlogEditor/BlogEditor.test.js:47:47）

那么，我是否正确地将参数传递给处理程序方法

另外，可能是

find

方法没有返回我尝试过的正确元素

• find（“#title”）

  as

  title

  是HTML id

• find（{占位符：“Blog Title”}）

  作为这个组件作为5个输入 每个组件都具有唯一的id属性和占位符 属性值

---

在浅层渲染上使用simulate时，事件处理程序应位于该节点上，因为浅层渲染不会正常传播。由于测试与

blogeeditor

相关，而不是

Input

，因此我建议使用

mount（）

而不是

shall（）

编辑 从以下文件：

常见问题

• 目前，浅层渲染器的事件模拟并不像人们在真实环境中通常期望的那样传播。因此，必须在设置了事件处理程序的实际节点上调用.simulate（）

---

更多：

所以有两个变化，比如@shaun-e-tobias正确地提到我们应该在这种情况下使用

mount

；并且必须添加一个

at

方法，因为

find

似乎返回了一个数组，更新了测试

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

我在

change

事件中使用了错误的参数，正如

enzyme

文档中所注意到的那样，因此有效的方法变成了

it("updates blog data with user input", () => {
    const blogEditor = mount(<BlogEditor />);
    blogEditor.find("#title").at(0).simulate("change",("title", { target: { value: "x" } }));
    expect(blogEditor.state('blog').title).toEqual("x");
});

---

这有助于克服这个错误，谢谢！我现在有一个新的要处理：-）将添加详细信息我得到错误

TypeError:ReactWrapper:：simulate（）事件“onChange”不存在。模拟（“onChange”（“title”，{target:{value:{x”}}））

在blogeEditor.find（#title”）.at（0.props（）.onChange（（（“title”，{target:{value:'x}））时给出上述错误工作

TypeError: ReactWrapper::simulate() event 'onChange' does not exist

it("updates blog data with user input", () => {
    const blogEditor = mount(<BlogEditor />);
    blogEditor.find("#title").at(0).simulate("change",("title", { target: { value: "x" } }));
    expect(blogEditor.state('blog').title).toEqual("x");
});

blogEditor.find("#title").at(0).props().onChange(("title", { target: { value: "x" } }));