This is the reference repository with all the contents and the examples of the "Javascript Testing, a Practical Approach" course.
The course starts from the peak of the testing pyramid and goes down instead of following the "standard" testing path.
Requirements
- Git 2.29
- Node.js 14
- NPM 6.14
- Docker Desktop
Are you ready for the course? Check it out with the following guides.
- Installing everything listed in the Environment section
- Having Docker Desktop running
- Launching
$ npm install - Launching
$ npm run test:smoke
The steps above launch the back-end and application, the front-end application, and Cypress. If you see something like
Spec Tests Passing Failing Pending Skipped
┌─────────────────────────────────────────────────────────────────────────────┐
│ ✔ realworld/smoke.spec.js 00:01 2 2 - - - │
└─────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! 00:01 2 2 - - -you're ready for the course!
Getting everything working reliably on Windows is hard. On Windows machines, the public version of RealWorld is used:
- Download Cypress as a desktop app
- Change cypress.json'
baseUrltohttps://react-redux.realworld.io
The tests without local dependencies
- must be adapted considering the changes between the local version and the public one
- URLs are hash-based on the public version
- passwords must be 9+ long
- some buttons and labels have different texts
- won't work if leverage the App Actions
- won't work if leverage additional packages (like jest-expect)
The most important scripts are:
$ npm run cy:open: starts the Cypress UI$ npm run realworld:start: starts both the back-end and the front-end project$ npm run realworld:frontend:start: starts only the front-end project
I'm Stefano Magni, I'm a passionate and positive-minded Senior Front-end Engineer, a Speaker, and an Instructor from Italy (working remotely since 2018). Developing User Interfaces, solving problems, and helping people are my passions.
I have worked in this field for more than ten years, including experience with different codebases (currently working on a 250K-LOC one) and various companies: a mid-size company, a Bitcoin startup, a web-agency, etc. organized through Scrum, Kanban, or classic Waterfall.
What I love:
- working with passionate people
- coding User Interfaces, solving the closest to the user problems
- writing maintainable and easy to refactor code
- guaranteeing the highest possible quality of my work with precise execution and problems prevention
- easing other developers and stakeholders work with high proactivity, communication, providing a lot of feedback, mentoring, and improving workflows
- actively looking for and proposing solutions for every kind of problem I see
- learning and solidifying/spreading my knowledge by speaking and teaching
In the last years, I became a speaker again, revamping my learning path completely, including answering on StackOverflow, writing articles, sharing plugins, and speaking at meetups.
I'm currently focused on React, TypeScript and all their ecosystems.
I wrote a big UI Testing Best Practices project on GitHub.
- Stefano Magni: Test the request and response payloads
- Kent C. Dodds: Write tests. Not too many. Mostly integration.
- Stefano Magni: Component vs (UI) Integration vs E2E tests
- Stefano Magni: Await, do not make your E2E tests sleep
- Kent C. Dodds: Testing Implementation Details
- Kent C. Dodds: Avoid Nesting when you're Testing
- Stefano Magni: Front-end productivity boost: Cypress as your main development browser
- Gil Tayar: Testing Your Frontend Code: Part V (Visual Testing)
- Kent C. Dodds: How to know what to test
- Gil Tayar (talk): Writing Tests For CSS Is Possible! Don’t Believe The Rumors
- Kent C. Dodds: Common Testing Mistakes
- Kent C. Dodds: React is an implementation detail
- Stefano Magni: The concept of "Monitoring Tests"
- Nivedita Sood: Storyshots a powerful side of Storybook to Visual Test React Components
- Josh McClure: How to test for accessibility with Cypress
- Steve Sanderson: Selective Unit Testing – Costs and Benefits
- Filip Hric: Improve your custom command logs in Cypress
- Gleb Bahmutov: 12 Recipes for testing React applications using cypress-react-unit-test
- J. B. Rainsberger: Integrated Tests Are A Scam
- Kent C. Dodds: Testing JevaScript
- Egghead.io: Test Production Ready Apps with Cypress
- Cypress documentation
- Toast UI: Pragmatic Front-End Testing Strategies
- Yoni Goldberg: JavaScript & Node.js Testing Best Practices
- Yoni Goldberg: JavaScript Testing A-Z (still in private mode at the time of writing)
- Stefano Magni: UI Testing Best Practices