Testing Formik with react-testing-library

Scott SauberLeave a comment

tldr;

Having issues testing Formik with react-testing-library?  Validation errors not showing up?  Formik validation happens asynchronously, so you need to use react-testing-library’s findBy* methods and await for the validation to finish (which can be done by waiting for some UI to show up).  Scroll to the very bottom to see a working test.

 

What is Formik?

Formik is a library for building forms in React.  It abstracts away some of the annoying part of forms like validation, errors, fields, etc. so that you don’t have to.  It can also do super useful things like keep track of if a field has been touched by the user or not yet, so you can delay showing validation errors until they actually interact with the field.

 

What is react-testing-library?

react-testing-library is… well… exactly what it sounds like – a library for testing React.  The library forces you to write tests that follow it’s primary principle:

The more your tests resemble the way your software is used, the more confidence they can give you.

In my opinion, this is one of the single most important aspects of writing good tests.  Tests that do too much mocking or too much “make sure this function is called with this data” is usually not a very useful test in my eyes.

Besides, giving you confidence the software is working – one of the biggest values of automated tests is giving you the confidence to to be able to refactor the internals of your code later on.  However, if the test knows too much about the internals, then you usually have to refactor both the code and the test, which can be really problematic, in my experience.

Ok – soapbox over.

 

InputField Component

Let’s say I have an InputField component.  This component will have 3 goals to accomplish:

  1. Render a label in a consistent way
  2. Render a text input in a consistent way
  3. Check if there are errors and display them in a consistent way

That way all of our labels, inputs, and validation errors are consistent across our entire application.

Note: I’m omitting a few things you may want in real life (like PropTypes, placeholders, making the input type a prop, styling validation errors, etc.) for brevity since it’s not super important for this blog post.

 

Testing the InputField Component the Wrong Way

Alright – let’s go to test the InputField component (normally we’d write the test first if we were doing TDD, so this is a little backwards, but bear with me).

One of the tests we need to write is to make sure the validation errors show up correctly.  The flow of that test will be like this:

  1. Render the InputField with some Formik validation around it
  2. Cause the validation to fail
  3. Ensure the validation errors are displayed.

In order to achieve this, you may start out with a test like this:

 

However this test will fail, because it says that the div with our validation errors is not rendered (notice, it should be below the input tag, but it’s not):

formikerror

 

Why does it fail?

So what’s the problem?  Well – Formik validation happens asynchronously, so while on line 28 above we call blur without entering any data in order to trigger a validation error.  On line 30 we immediately go looking for that validation error.  The problem is – Formik validation hasn’t finished executing when we go look for the UI to change, so when we go to expect our validation error UI is there, it’s not because the validation is still executing.

 

Solution

So the solution then is to make the call to find the UI asynchronously via findByTestId instead of getByTestId.  All of the findBy* functions in react-testing-library are asynchronous and react-testing-library will wait up to 4.5 seconds for the UI to appear before failing the test, which should give Formik enough time to run validation in this case.

So the successful test can look something like this:

 

I changed line 6 to make the test async, line 9 to destructure findByTestId and line 30 to call await findByTestId instead.  Now the test passes:

2019-05-25_21-34-51

 

Hope this helps!

Blazor: Implementing Client Side Search As You Type Using bind-value-oninput

Scott Sauber4 Comments

tldr;

Use bind-value-oninput instead of bind in order to get real feedback as you type.  bind only databinds during the onchange event which requires losing focus whereas bind-value-oninput databinds on every keystroke.  See line 3 below:

 

What is Blazor?

Blazor is an experimental SPA framework, built by Microsoft, running on top of WebAssembly that lets you write C# that runs client-side in a browser.  This allows you to share logic between your server-side C# code and your client-side C# code (such as models, validation, etc.).  Blazor limits (if not entirely eliminates) your need to write JavaScript to make a SPA.  You can learn more by visiting https://blazor.net/.

 

Scenario: Searching a List Client-Side

I want to build a Search feature that allows the user to search an unordered list (<ul>), purely client-side.  I don’t want to go back to the server to search, because in my scenario my data results are fairly small, don’t update often, and I want the response time to the user to be fast and avoid a round-trip.  I was looking around and didn’t see much on the Interwebs showcasing this, which is why I wrote this post.

Note: This scenario could also be tweaked to search through a table (when pulling in a grid component is overkill), searching FAQs in an accordion, or really anything that needs a client-side search, it doesn’t have to be a list.  The same concept applies.

Let’s build a simple component that loops over a list of ToDoItems and displays them in a list.  You could imagine this could be used for a ToDo app, but I’m going to remove all the typical ToDo functionality (like checking off tasks as completed) since it will just add noise to this example.

It’ll look like this on the front-end:

ToDo

 

And the component that powers it looks like this:

 

On line 3 we are taking an input and using the bind attribute to databind the input’s value to the SearchTerm property.  That SearchTerm property is then used on line 30 to search through our ToDoItems and return any matches in the FilteredToDos property.  Our list loops over the FilteredToDos and displays them out.  Let’s take a look how this works in real life with this gif:

Blazor Bind

 

What’s the problem?  bind fires with onchange

By default, Blazor’s default bind fires on the onchange event.  The onchange event doesn’t fire until the input element loses focus.  This means when a user types in the Search input they need to lose focus on the input before the Search takes place.  While this is okay UX-wise, it’s not exactly ideal.  My ideal world would be to have it fire while the user is typing so they can get real-time feedback without having to do any extra work (like clicking/tabbing out of the input or clicking a search button).

 

Solution: Use bind-value-oninput instead of bind

A little known feature about Blazor’s data binding is that bind has options that let you bind to different events, not just onchange.  For our scenario, we want to databind to the oninput event which fires immediately every time the value has changed.  We can do this by swapping out bind="@SearchTerm" for bind-value-oninput="@SearchTerm" on line 3 here:

 

Now when we run our app, we get a much better UX:

Blazor Bind Value OnInput

 

Hope this helps someone else in a similar scenario!