Test for value change in a Field

Bug, Feature, or Question?

Question

First of all, I’d like to apologize for my bad english.

I’m trying to write a test where I can verify if a button is enabled or not, but I’m not managing to make it work.

The component that I have:

// TodoForm.js
import React from 'react';
import { withFormik, Form, Field } from 'formik';
import yup from 'yup';

const TodoForm = ({ isValid }) => (
  <Form>
    <Field name="todo" type="text" placeholder="Type your todo here..." />
    <button disabled={!isValid}>Add ToDo</button>
  </Form>
);

const EnhancedTodoForm = withFormik({
  mapPropsToValues: () => ({ todo: '' }),
  validationSchema: yup.object().shape({
    todo: yup.string().required(),
  }),
  handleSubmit: (values, { props }) => {},
})(TodoForm);

export default EnhancedTodoForm;

I want to change the ‘todo’ value (preferably via simulate) and see if the button gets enabled, but I’m not even able to change the value of Field.

Does anyone have any ideas? I’d love if it comes with an example ❤️.

Additional Information

This is the piece of code that I tried without success until now.

// TodoForm.test.js
import React from 'react';
import { shallow } from 'enzyme';

import TodoForm from './TodoForm';

describe('<TodoForm />', () => {
  let enhancedTodoForm;

  beforeEach(() => {
    enhancedTodoForm = shallow(<TodoForm />);
  });

  describe('interactions', () => {
    describe('user types something', () => {
      const newTodo = 'my new todo';

      it('`button` gets enabled', () => {
        const todoFormComponent = enhancedTodoForm.dive().dive();
        const field = todoFormComponent.find('Field');

        // this don't change the value, or at least i'm not figuring out how to access
        field.simulate('change', {
          persist: () => {},
          target: {
            name: 'todo',
            value: newTodo,
          },
        });
        // this also doesn't change the values prop inside the component
        enhancedTodoForm.dive().setProps({ values: { todo: newTodo } });

        expect(todoFormComponent.find('button').props().disabled).toBe(false);
      });
    });
  });
});

---

• Formik Version: 0.11.11
• React Version: 16.2.0
• OS: Ubuntu 16.04
• Node Version: 8.9.4
• Package Manager and Version: yarn 1.3.2

[bmakuh]

Haha, after typing that out I realized my problem: I had a name attribute on the element, but I was assuming Enzyme was going to pass that element along as the event.target like in the real DOM, but that’s not true. Adding an explicit event.target.name in the simulated onChange fixed the problem.

[bmakuh]

@Ciaran0 yep, sure. The reason it wasn’t working for me was because I didn’t realize that I needed to explicitly provide a name property on the event object I was passing in, like this:

component.find('[data-test-id="email-field"]').simulate('change', {
  target: {
    name: 'email',
    value: '[e-mail]'
  }
})

When your code runs in the browser, the native event will send the actual element as the target, in which case the name will be set already.