2

In my test, I have this:

let fromInput = wrapper.find('#starting-address').getElement();
fromInput.value = 'Foo';

However, I'm getting an error:

TypeError: Cannot add property value, object is not extensible.

I'm trying to test a button I have which, on clicking, should clear the value of the input element (id: 'starting-address'). I was planning on asserting that fromInput.value === 'foo' before simulating the click, and fromImput.value === '' after clicking.

user7637745
  • 965
  • 2
  • 14
  • 27
Fabian
  • 397
  • 1
  • 4
  • 12

2 Answers2

3

This worked with me:

it("Successfully add an employee to the employees' list when the form submitted",function(){
   const wrapper = mount(<App/>);
   const addEmpWapper = wrapper.find('AddEmployee');
   addEmpWapper.find("#txtName").getDOMNode().value = "Youki";
   addEmpWapper.find("#txtImgUrl").getDOMNode().value = "ImageUrl1";
   addEmpWapper.find("#txtDesc").getDOMNode().value = "Cute baby.";

   const form = addEmpWapper.find('form');
   form.simulate("submit");
   // I already had 3 employees in the app's states bag.
   expect(wrapper.state().employees).to.have.lengthOf(4);
 });
Mohamed Yahya
  • 91
  • 6
0

You need to use instance() instead:

const formInput = wrapper.find('#starting-address').instance();
formInput.value = 'Foo';

Check out this answer, for more details.

Alejandro
  • 5,834
  • 1
  • 19
  • 36
  • The docs says it can only be called on a wrapper instance that is also the root instance though? – Fabian Jul 05 '18 at 05:24
  • I think this is b/c of `shallow()` ( as in they example). If you do `mount()` - I don't see the reason why not to use it. – Alejandro Jul 05 '18 at 07:59