[英]React.js - Simulating a click with Enzyme
I have this React.js app that is a simple Cart app. 我有这个React.js应用程序,这是一个简单的购物车应用程序。 https://codesandbox.io/s/znvk4p70xl
https://codesandbox.io/s/znvk4p70xl
The problem is I am trying to unit test the state of the application using Jest and Enzyme but it does not seem to work. 问题是我试图使用Jest和Enzyme对应用程序的状态进行单元测试,但它似乎不起作用。 Here is my
Todo.test.js
unit test: 这是我的
Todo.test.js
单元测试:
import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Todo from '../components/Todo';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
test('Test it', async () => {
// Render a checkbox with label in the document
const cart = [
{ name: 'Green', cost: 4 },
{ name: 'Red', cost: 8 },
{ name: 'Blue', cost: 14 }
];
const wrapper = mount(<Todo cart={cart} />);
const firstInput = wrapper.find('.name');
firstInput.simulate('change', { target: { value: 'Pink' } });
const firstCost = wrapper.find('.cost');
firstCost.simulate('change', { target: { value: 200 } });
const submitButton = wrapper.find('.addtocart');
submitButton.simulate('click');
wrapper.update();
expect(wrapper.state('price')).toBe(26);
console.log(wrapper.state());
console.log(wrapper.props().cart);
});
When I run the test, the cart still says the same thing when the item Pink
should have been added. 当我进行测试时,当应该添加
Pink
项目时,购物车仍然会说同样的事情。
How can this be when I have simulated a button click on the addToCart
method? 当我模拟按钮点击
addToCart
方法时,怎么会这样?
PASS src/__tests__/todo.test.js
● Console
console.log src/__tests__/todo.test.js:32 { price: 26 }
console.log src/__tests__/todo.test.js:33 [ { name: 'Green', cost: 4 }, { name: 'Red', cost: 8 }, { name: 'Blue', cost: 14 } ]
Enzyme's simulate
is looking for an onChange
event on your Todo component, and it's not finding one. Enzyme的
simulate
是在你的Todo组件上寻找一个onChange
事件,并没有找到它。 You don't have onChange
specified as a prop, so it would make sense that it's not triggering. 你没有将
onChange
指定为prop,所以它没有触发它是有意义的。 Wire up the onChange
prop to your component if this is the way you want to test it. 如果这是您想要测试的方式,请将
onChange
道具连接到您的组件。 From the docs: 来自文档:
Even though the name would imply this simulates an actual event, .simulate() will in fact target the component's prop based on the event you give it.
即使名称暗示这模拟了一个实际的事件,.simulate()实际上会根据你给它的事件来定位组件的prop。 For example, .simulate('click') will actually get the onClick prop and call it.
例如,.simulate('click')实际上会获得onClick prop并调用它。
You are attempting to simulate a click on an element with class addtocart
. 您正在尝试使用类
addtocart
模拟元素上的单击。 However, you don't have an element with class addtocart
. 但是,您没有类
addtocart
的元素。 Your add button has an element ID of submit
. 您的添加按钮的元素ID为
submit
。
Change this: 改变这个:
const submitButton = wrapper.find('.addtocart');
To this: 对此:
const submitButton = wrapper.find('#submit');
After looking at your Todo
code: 看完你的
Todo
代码后:
<input id="itemname" name="name" ref={this.nameRef} className="form-control" type="text" placeholder="Add item to List" />
and 和
<input name="cost" id="itemcost" ref={this.costRef} className="form-control" size="5" type="text" placeholder="Cost" />
I don't think wrapper.find('.cost')
will work. 我不认为
wrapper.find('.cost')
会起作用。 I suggest you do wrapper.find('#cost')
我建议你做
wrapper.find('#cost')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.