How to test React code that modifies input in frontend


I am testing a React website, and this is my first time. In my page, I have to enter a string containing spaces before and after the actual search string, to simulate real user behavior. The React front-end treats the string, trimming it, before sending a request to a REST endpoint.

So the scenario is=

  • I navigate to the search page
  • I enter a String containing starting and ending spaces
  • I verify in the request that the front-end sends to the back-end, string doesn’t contain starting or ending spaces.

How can I do this? Up to now, I have done pure web test or pure rest test, but this looks quite different from what I have done up to now, and I have few tests like this one. The logic executes in the front-end and then sends the REST request.

Has anybody done this type of tests?

Any help is welcome.

The trimming (at a guess) is happening in JavaScript code wired to the request submission. This kind of test is usually conducted as a unit test, not in automation software like Katalon Studio.

If there is an outcome that appears on the webpage that “proves” the trimming takes place, then I would advise you to test that.

Ok, thanks for the answer.
I thought it was possible to catch the outgoing request, like when we do it with chrome tools.