What tools do you use to test your frontend?

Cypress. I tried Puppeteer, Playwright and a few others but they had weird 'quirks'. So does Cypress, but Cypress charmed me with their AMAZING documentation. THIS is how documentation should ALWAYS be written. And it is needed, since testing front-ends back-to-back is not easy, and you need someone to hold your hand. At least I did.

I've spent A LOT of time getting it all set up, and the documentation starts growing thin around the extreme use of the tool, but the source code is there to be checked...

One big thing though: if your tests are flakey, try a 'wait one second' command. I know the docs say it is the worst thing to ever do, but you often have the choice of adding it and or do it the proper way but spending a day finding out how to make it deterministic and only saving yourself a second per test.

Also, running the tests in headless mode is A LOT more stable than the headed.

Finally, for snapshot testing, I ended up forking my own version of cypress-image-snapshot. The code in that package isn't difficult to hack yourself, and you then have absolute control over it. One thing you'll want to do is set up automatic sub-foldering per/browser per/head-mode since those screenshots WILL differ, so having them separated makes sense.

Oh, and if you run vue or firebase, I've noticed sometimes that Cypress 'starves' the main thread retrying assertions to such a degree that firebase or vue changes never get propagated to the UI, basically causing a deadlock. To fix that, you need to create your own tasks that uses promises to wait for Vuex Store commitments to come through and only then re-test the assertions. That will free up the main thread to actually update the system. Look at the (sadly not documented) 'cy.verifyUpcomingAssertions' function for how to check assertions from a command before 'relinquishing' a command value.

unit testing feels a bit pointless for front-end. I feel like unit testing using something like jest is more for corporate sign-off and not for indie hackers. they use unit testing on the server so maybe they should on the client too lets give the dev team a code coverage target... but you're only doing i/o tasks on the front end and all the issues that come up are to do with prioritising whats run when in the event loop. testing a single unit of javascript always felt pointless to me because of how rare it is that any major problems comes from an isolated unit of code.

for integration testing I've used Selenium but very keen to check out some of the other suggestions on here because... well you know. I've also built a custom chrome plugin in the past to do some more advanced integration testing relative to the project I was working on and found that for the effort it took to build it was totally worth it.... a far better use of time than writing any unit tests.

Cypress +1. It's great for end-to-end testing.

I'm running cypress on CI. At first I tried to test complex redirect flows with it (like auth and payment where users are jumping between my domain and other ones) but it didn't really work. Now I'm content with just testing the basic frontend features, but not go too far with it. Nice balance of benefits / time spent.

Mainly TestCafe (one colleague once said, "the enemy of the good [Cypress] is the better") run after deployment or nighly through Jenkins.

Hi Andras,

I'm building a web scraping service (https://datagrab.io) and in order to get it out quickly (and furthermore, because in this early phase, the UI constantly changes), I haven't got any tests written yet (bad practice, I know :) ).
I'm using React / Redux on the Frontend, so I'm looking into incorporating Jest and Enzyme as testing libraries. Coupled together, they are pretty good at testing the Redux store, action creators and even React components.

I'm just using React Testing Library / Jest for my landing page right now. Eventually I'd like to move to https://www.cypress.io/ for full end to end testing in the browser

For React apps I prefer running tests with Jest inside NodeJS.

Libraries:
https://github.com/facebook/jest
https://github.com/jsdom/jsdom
https://github.com/testing-library/react-testing-library
https://github.com/jameslnewell/xhr-mock
https://github.com/boblauer/MockDate
https://github.com/clarkbw/jest-localstorage-mock

Typical test:

1. Mock the DOM
2. Mock XHR requests
3. Render the component (usually something big and isolated like a "page")
4. Trigger events (button click etc)
5. Assert DOM state
6. Assert XHR order, urls, payloads

If you mean testing frameworks, then I am a big fan of Cypress.

Although I am not totally fond of their asynchronous handling, it's way better than anything I've used in the past.

We're using Endtest and it has been a decent experience so far.

URL: https://endtest.io

We've tried to use Cypress, but it had too many limitations, like the fact that it did not work with multiple browser tabs and the fact that it did not work with Internet Explorer 11, Safari and mobile browsers.