How to test SPA that calls api server (backend)

[Martinsos]

Hi, thank you for creating this great library!
I am looking at Testcafe as an option to test the web app we are building.
It consists of frontend in React/Redux, api server (backend) in nodejs and mongo database that api server is connected to.

I would like to run different types of tests:
1. Those that test everything together, the whole stack.
2. Test only frontend in isolation.
3. Test api server in isolation.

I found relatively good blog post (https://www.cypress.io/blog/2017/11/28/testing-vue-web-application-with-vuex-data-store-and-rest-backend/) by cypress, but nothing similar by testcafe.
I would love to hear some best practices from your side for each of these cases!
For #1, I am assuming I would run all the components (frontend/backend/db) and then run tests while making sure to reset database appropriately when needed.
For #2, I could either implement mock server (which I don't like as an idea because I can't customize responses per test) or I could somehow intercept and mock requests per test -> is there a support for that?
For #3, should I even use testCafe? Probably not, right?

Thanks!

[MarinaRukavitsyna]

Hi @Martinsos

1. Those that test everything together, the whole stack.

Just use regular TestCafe tests.

Test only frontend in isolation.

You can implement a mock server using request hooks, which will be added in TestCafe 0.20.0. We are now testing this version and are going to release it in a few days.
Alternatively, you can use client tests for separate modules.

Test api server in isolation.

Generally, TestCafe is designed for functional/end-to-end (e2e) tests. From what I gather, you wish to test CRUD operations and work with your database. If so, generally unit tests, not functional/e2e tests are performed for this. So, I suggest you add unit tests, e.g. with mocha.

I would love to hear some best practices from your side for each of these cases!

I recommend you take a look at TestPyramid by Martin Fowler and The Front-End Test Pyramid: How to Rethink Your Testing by Edd Yerburgh. The main idea of both articles is that there is no need to add too many e2e tests.

To sum-up, TestCafe is suitable for your first task ideally, for the second task - depending on your specific scenario, for the last task - it is better to use unit testing frameworks instead.

[Martinsos]

Thanks @MarinaRukavitsyna, that makes sense!
I ended up implementing solution with TestCafe for case #1 with the real database that I load with prepared data before executing tests, I might do something in the future for #2 with the request hooks that you mentioned (that is awesome feature!) and I will use Jest for #3.