How to test a series of interactions?

Question

I've been learning how to write automated tests for a React app, and it's brought up questions on how best to test a series of interactions with the app.

Let's say that I have a React app that allows the user to assign students to seats in a classroom: Here's an image of what such an app would look like.

I'd like to test creating a new student, adding that student to a seat in the classroom, and then moving that student back to the area of unseated students in the middle column (I'll call it the roster).

What would be the best way to write out the test(s) for this? Would it make sense to have a single large test case, which would include assertions for each of the interactions I'm testing (creating a new student, moving it between the classroom and roster)?

Or should I create multiple cases, where one depends on the other? In other words...

Test 1) Check that a new student is created successfully when submitting the form

Test 2) Using the student created in test 1, move the student to a seat in the classroom

Test 3) With the student now in a seat (due to test 2), move it back to the roster area

Another question I have is whether React Test Library would be sufficient for this purpose. Or would this be considered an end-to-end test that should be written using Cypress?

Your feedback is much appreciated!

Answer 1

The process you described can surely be tested with react-testing-library as an integrated test. From the docs/faq, it encourages testing a component high enough up the component tree, without mocking child components, in order to simulate and test what an actual user interaction would be like.

Also check out this Kent C. Dodds blog post .

Answer 2

You want your tests to be as granular as possible, as you have already split them in 3 different cases. This will make it easier for everyone to read your code.

As for the testing library, I would go with Cypress which advertises itself as a JavaScript End to End Testing Framework.

You are testing end-to-end functionality here by manipulating what seem to be multiple components. React testing library, on the other hand, seems to focus on testing individual components on a more low-level approach - there's a chance it will falter on the long run, but it probably gets the job done aswell.