How to successfully test React apps to speed up development / Using Cypress

04/02/2022 1h 32min Temporada 1 Episodio 36
How to successfully test React apps to speed up development / Using Cypress

Listen "How to successfully test React apps to speed up development / Using Cypress"

Episode Synopsis

Stop getting midnight calls because you broke the site on the last deploy: use Cypress for front-end testing! In this episode we talk about how we use the free, open-source testing framework Cypress to save time, catch bugs, and sleep better at night.LinksEpisode PageCypressTwitter Owl CreekTwitter Thomas HintzYouTubeShow NotesWhat is integration testing?What are other types of testing?UnitStory Time, life without good testsStories about poorly written testsProblem: new features get priority over testingGood tests with good coverage speeds up development!I always write tests before refactoring because you can go wild and know that all you have to do is get the tests to pass in the endGood tests give confidence: you can write new features/code a lot more quickly because you don’t have to think about breaking things, if somethings breaks you’ll know and you can fix itInfrastructure investment: it’s like investing in better roads and transportation networks, it has an upfront cost but you can move people and goods faster and more efficiently afterwardsSolution: new features priority over testingEstimates include testingDon’t demo until you have tests if demoing puts on pressure to finish before you wrote testsWhat to test? / Testing priorities?Integration first (ensures things actually work for the end-user)Then unitWhat is Cypress used for?Integration TestsUnit TestsWhat makes Cypress best suitable for the task?FastConsistentScreenshots, videos, logsNetwork request spies, spoofingCI IntegrationDashboardWhat I don’t like about Cypress:Async APIMaybe necessary for this because of JS?Successfully Maintaining Tests?When to write tests?Cypress tips & tricksCustom commandsCapturing valuesExample: capture a numeric value, do test, check that the new value is correct based on old oneSupport the show