React app- Unit test for form input

JavaScript
#1

Hi all,

I am working on a React app which receives a few numerical fields and then calculates some values (Let’s say the mean, median, etc …). I am wondering if is it possible to write unit tests when what is considered, is the order in which these inputs were filled and not only their values. Supposing that we have fields A, B, and C as input, and field D as output. I want to test different results of the output according to the order in which the form was filled. A, B,C or B,A,C …

Thank you for your attention and help !

#2

Yes it’s possible. You render your form, fill out the fields in the order you wand and check for the result.

What have you tried?

#3

Nothing up to no, I am asking about the tools that can help me do this task. Continuously test different combinations of inputs in different order.

#4

Yes. There are two approaches to test the actual React part:

  • you use a testing library for React (ie React Testing Library which is run using a test runner (ie Jest). This will allow you to test components of groups of components in isolation.
  • you use an E2E testing tool (eg Cypress) to white tests that simulate a user actually using the app in a browser.
  1. will work fine here. So will 2., but it’s very slow to run (in comparison to 1) and E2E tests are extremely fragile.

But there is a 3, and you should be doing it. What you’re describing is just a function that takes three values and returns a different result depending on the order. That’s the thing that’s important here, and that should be seperated out and unit tested. The React part – that’s just to get inputs into and for displaying the result of that function, testing that React part is not as important as the core logic.

Jest comes packaged with an assertion library for this purpose (expect a is equal to b).