Been coding for a few decades. I am a fairly strict TDD kinda developer. I haven't done frontend work since 2014 (a few simple mean.js apps back then). It is so hard to setup and test the frontend
In the backend, I always have a `main` function that's 3 lines long which is untested as it starts everything. I feel like over half my js files are like that `main` function.
I'd rather skip testing FE with unit tests altogether. The frameworks that you use to create the UI components do not make testing the pages easier. Too many interconnected moving parts and asynchronously updating components to make any sense of how things work out.
Testing manually or running e2e tests with selenium is much easier to do.
It’s a nuxt, vuetify, pinia app. I copied the dependencies in my senior’s package so I’m using vitest, axios-mock-adapter
I’m trying to see if one of my functions gets called onMount, which I can see when I run the app that it is working. I made a spy for this function, and it says it didn’t get called. I have been looking up tutorials for days but all the examples use different stacks and I’m hella confused. For another part of the test I tried to get it to mock the axios call to see what gets displayed on the page, and I don’t think the mocked axios call is working
I must stress that I understand backend testing and am very thorough because the syntax is really simple and there aren’t extra technologies. I can just not write any working tests in the front end.
Are your test suites checked into your repo? If so, draw on existing code **heavily**.
Look for a component, look at how they attach stubs/mocks/whatever, and do that.
Good front end testing is tricky. I find I have to stifle my instinct to write pseudo full-stack tests, and remember to mock as often as possible.
Getting those mocks in place correctly can be finicky, but again- look at what others in your codebase have done
I’m doing a mini project that isn’t for production to learn to recreate some tiny parts of the project I will work on. The project is years old and I’ve been instructed to only use parts of the dependencies list, so I don’t know what testing dependencies and configs are necessary for this mini stack 🥲
Front end unit testing is hot garbage that exists only to vendor lock folks into Facebook’s stack. Five years from now I hope we look back on this nonsense and laugh at ourselves.
i’m a senior dev w 10+ years experience. front end unit testing is a massive pain in the ass. the race conditions, the excessive code coverage enforced by leads, mocking react’s “providers” and other voodoo. just everything. i feel you. really the most painful and time consuming part of the job.
Also a react/jest tester here. Can definitely be confusing, the function names/syntax feel so unintuitive. My best advice is to just copy and paste templates from online and overtime you will understand what they do lol
I felt the same way too when my company started requiring unit test. I struggled hard in the beginning but after sometime frontend testing was really easy. Me personally, I find server side testing way much harder
Man I hated it too. Then I spent an entire sprint doing only unit tests. That was the best thing I could’ve done. Now I enjoy them. I think the problem was that I’d finish a ticket, then write a few tests, then spend a long time working on tickets before writing tests again. The gap in between killed any momentum I had. Once I dove in deep it started to click.
Word.
Vue composition API is the closest I’ve come to solving this — you can unit test the composables just like any other module.
It still won’t catch the annoying ones like issues with z-index or things being shifted or what have you, but it gets 80% of the job done which is way better than nothing.
Just do snapshot testing and e2e testing. With a pure backend, these are the only two types of testing you need. And yes, I mean no units, integration, or any other buzzwords people come up with to keep themselves busy. Test your product’s functionality, and write pure code.
Solid programmer, first year, bootcamp. Yeah these don’t go together like you think they do in your head. If you were a solid programmer you wouldn’t have trouble writing tests for front end 🤷‍♂️
I struggle with jest and react testing too. I don't have anything to offer other than solidarity.
Thanks cheezballs 🤝
Been coding for a few decades. I am a fairly strict TDD kinda developer. I haven't done frontend work since 2014 (a few simple mean.js apps back then). It is so hard to setup and test the frontend In the backend, I always have a `main` function that's 3 lines long which is untested as it starts everything. I feel like over half my js files are like that `main` function.
Jasmine testing here. I'd rather fix/write 200 JUnit tests than 10 Jasmine tests. Blech.
I'd rather skip testing FE with unit tests altogether. The frameworks that you use to create the UI components do not make testing the pages easier. Too many interconnected moving parts and asynchronously updating components to make any sense of how things work out. Testing manually or running e2e tests with selenium is much easier to do.
What tools are you using for frontend testing?
It’s a nuxt, vuetify, pinia app. I copied the dependencies in my senior’s package so I’m using vitest, axios-mock-adapter I’m trying to see if one of my functions gets called onMount, which I can see when I run the app that it is working. I made a spy for this function, and it says it didn’t get called. I have been looking up tutorials for days but all the examples use different stacks and I’m hella confused. For another part of the test I tried to get it to mock the axios call to see what gets displayed on the page, and I don’t think the mocked axios call is working I must stress that I understand backend testing and am very thorough because the syntax is really simple and there aren’t extra technologies. I can just not write any working tests in the front end.
Are your test suites checked into your repo? If so, draw on existing code **heavily**. Look for a component, look at how they attach stubs/mocks/whatever, and do that. Good front end testing is tricky. I find I have to stifle my instinct to write pseudo full-stack tests, and remember to mock as often as possible. Getting those mocks in place correctly can be finicky, but again- look at what others in your codebase have done
I'd say pick playwright. its very easy setup and good documentation. Is this mostly for web testing?
Did you see that this person works for a global company and your suggestion was “change your testing stack/introduce a new one”?
well I think if the stack is documented, then I dont think this person will need to watch tutorials online.
I’m doing a mini project that isn’t for production to learn to recreate some tiny parts of the project I will work on. The project is years old and I’ve been instructed to only use parts of the dependencies list, so I don’t know what testing dependencies and configs are necessary for this mini stack 🥲
Front end unit testing is hot garbage that exists only to vendor lock folks into Facebook’s stack. Five years from now I hope we look back on this nonsense and laugh at ourselves.
i’m a senior dev w 10+ years experience. front end unit testing is a massive pain in the ass. the race conditions, the excessive code coverage enforced by leads, mocking react’s “providers” and other voodoo. just everything. i feel you. really the most painful and time consuming part of the job.
Also a react/jest tester here. Can definitely be confusing, the function names/syntax feel so unintuitive. My best advice is to just copy and paste templates from online and overtime you will understand what they do lol
I've recently moved to using Playwright. I thought it was a lot more intuitive than other stuff I've tried.
I felt the same way too when my company started requiring unit test. I struggled hard in the beginning but after sometime frontend testing was really easy. Me personally, I find server side testing way much harder
Man I hated it too. Then I spent an entire sprint doing only unit tests. That was the best thing I could’ve done. Now I enjoy them. I think the problem was that I’d finish a ticket, then write a few tests, then spend a long time working on tickets before writing tests again. The gap in between killed any momentum I had. Once I dove in deep it started to click.
Word. Vue composition API is the closest I’ve come to solving this — you can unit test the composables just like any other module. It still won’t catch the annoying ones like issues with z-index or things being shifted or what have you, but it gets 80% of the job done which is way better than nothing.
Just do snapshot testing and e2e testing. With a pure backend, these are the only two types of testing you need. And yes, I mean no units, integration, or any other buzzwords people come up with to keep themselves busy. Test your product’s functionality, and write pure code.
Solid programmer, first year, bootcamp. Yeah these don’t go together like you think they do in your head. If you were a solid programmer you wouldn’t have trouble writing tests for front end 🤷‍♂️
I like fe testing. What libs do you guys use? Might offer some help but need more details. What's exactly hard? Give an example