testing formik in jest

[StefanZivkovic]

I am not sure if this is the right place or is it the formik github, but i have issues to test formik. Do i have to mock something regarding formik in my tests before testing them?

EDIT: Sorry for this long feedback from my side. This is the basic sandbox https://codesandbox.io/s/mo4fi?file=/src/App.js. Usually i would like to test validation messages - how they change based on input. But i have issues here to perform simple fireEvent.change() command with given error:

The given element does not have a value setter

Error: The given element does not have a value setter
    at setNativeValue 

And later i can't find out how to grab that validation message. I try with await wait + getByText, and i try also without await wait but with findByText, but without success.

[gnapse]

Hi @StefanZivkovic. Your starting comment here is pretty vague. Could you provide a generic example of a small view using formik and/or what the specific difficulties are? A codesandbox showcasing the issues would go a long way in others being able to help.

[StefanZivkovic]

edit in post

[gnapse]

The line const email = getByText("email") is giving you the <label /> element, not the input element. You cannot issue a change event on a label element.

What you probably want to use is getByLabelText, which gives you the form element that is labeled by the text you pass as argument.

You also want to make sure that the label is correctly associated to the form input field.

[StefanZivkovic]

yeah, my bad... ok i managed something. but i have question why i keep getting error like this:
Unable to find an element with the text: Invalid format!. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

await act(() => {
      fireEvent.change(email, { target: { value: "myMail" } });
    });
    expect(await findByText("Invalid format!")).toBeInTheDocument();

[gnapse]

You should try to debug what these find/get/query helpers are giving you at each step of the way, and determine what's wrong. In this case I'd say the error message is already really helpful and you gotta do the rest of the work on top of what's telling you, in order to figure it out in the specific situation of your project and code.

There debugging helpers and patterns in react testing library. In general I'd recommend you to checkout the testing library website where all these things are documented, there are examples, etc.

[StefanZivkovic]

Great, thank you @gnapse very much for your time and advices.

EDIT: After refreshing the codesandbox i managed to get the desired behavior (to test the error validation messages when use yup+Formik). I don't know why (maybe after adding dependency), but in my experience codesandbox very often has very strange response (in sense of giving errors which should not be given). But one F5 solves the issues, just to get used to it!