HackMD
Day 2 #butmakeitkawaii
Prompt:
Please take the role of coding tutor on a Test Driven Development course where I, the student, will be learning how to write tests for my code as part of 100DaysOfCode. The testing libraries the course covers are Vitest, React Testing Library and Cypress. I would like to do one lesson per day and for you to figure out the study plan and exercises. I am able to dedicate 1 - 2 hours each day to this course so please bear this in mind when making the study plan.
GPT-4 response:
Sure, I'd be happy to assist you in creating a study plan for Test Driven Development (TDD) focusing on Vitest, React Testing Library, and Cypress. This is a highly valuable skill set for any developer and I'm glad to see you're interested in learning it.
Let's create a 30-day plan to kickstart your journey, with a focus on understanding key concepts, writing your first tests, and gradually building up to more complex scenarios. Each day's lesson will include reading material or videos, along with practical exercises that you can complete within your 1-2 hour time frame.
Please note that this is a tentative plan and can be adjusted based on your progress and comfort level.
Day 1 to 5: Understanding Test-Driven Development and JavaScript Testing Basics
Day 1: Introduction to Test-Driven Development (TDD)
Read about the TDD process, its benefits and drawbacks.
Exercise: Write a short essay on why TDD is beneficial.
Day 2: Understanding JavaScript Testing Basics
Read about what is unit testing, integration testing, and end-to-end testing.
Exercise: Write definitions and examples for unit, integration, and end-to-end testing.
Day 3: Setting up a JavaScript testing environment
Set up a basic JavaScript project and install Jest (a JavaScript testing framework).
Exercise: Write a simple test in Jest and run it.
Day 4: Writing More Tests in Jest
Deep dive into Jest's features (matchers, asynchronous testing, mocking).
Exercise: Write a test suite for a JavaScript function using various Jest features.
Day 5: Introduction to Vitest
Read about Vitest and its features.
Exercise: Set up a new project with Vitest and write a simple test.
Day 6 to 15: Deep Dive into Vitest
Day 6-7: Understanding Vitest in depth
Explore Vitest's features (test organization, assertions, setup/teardown).
Exercise: Write a more complex test suite in Vitest.
Day 8-9: Asynchronous testing in Vitest
Read about asynchronous testing in Vitest.
Exercise: Write tests for a function that uses promises or async/await.
Day 10: Vitest and Vue.js
Learn about testing Vue.js components with Vitest.
Exercise: Write a test for a simple Vue.js component.
Day 11-15: Project - Build and Test a Vue.js App
Build a simple Vue.js app and write tests for it using Vitest.
The project will help cement your understanding of Vitest and Vue.js testing.
Day 16 to 25: Deep Dive into React Testing Library
Day 16: Introduction to React Testing Library
Read about React Testing Library and its philosophy.
Exercise: Set up a new React project and write a simple test using React Testing Library.
Day 17-18: Understanding React Testing Library in depth
Explore React Testing Library's features (rendering, querying elements, firing events).
Exercise: Write a more complex test suite using React Testing Library.
Day 19-20: Asynchronous testing in React Testing Library
Read about asynchronous testing in React Testing Library.
Exercise: Write tests for a React component that fetches data from an API.
Day 21-25: Project - Build and Test a React App
Build a simple React app and write tests for it using React Testing Library.
This project will help cement your understanding of React Testing Library and React testing.
Day 26 to 30: Deep Dive into Cypress
Day 26: Introduction to Cypress
Read about Cypress and its features.
Exercise: Set up a new project with Cypress and write a# I will search for a simple example of a test written using Cypress.
search("simple Cypress test example")
Finished browsing
simple test.
Day 27-28: Understanding Cypress in depth
Explore Cypress's features (navigating, querying elements, interacting with elements, assertions).
Exercise: Write a more complex test suite using Cypress120describeanditcome from Mocha\n *expect comes from Chai\n\nCypress builds on these popular tools and frameworks that you hopefully already have some familiarity and knowledge of. If not, that's okay too","pub_date":null}}40VISITaction.\n 2. The Kitchen Sink application has been loaded into the App Preview pane.\n 3. The test is green, even though we made no assertions.\n 4. TheVISIT displays a blue pending state until the page finishes loading","pub_date":null}}0type?\n\nTo find this element by its contents, we'll use cy.contains().\n\nLet's add it to our test and see what happens:\n\n describe('My First Test', () => { \n it('finds the content "type"', () => { \n cy.visit('https://example.cypress.io') \n\n cy.contains('type') \n }) \n }) \n\nOur test should now display CONTAINSin the Command Log and still be green.\n\nEven without adding an assertion, we know that everything is okay! This is because many of Cypress' commands are built to fail if they don't find what they're expecting to find. This is known as a Default Assertion.\n\nTo verify this, replacetypewith something not on the page, likehype. You'll notice the test goes red, but only after about 4 seconds","pub_date":null}}7.
Day 29-30: Project - End-to-end Testing with Cypress
Write end-to-end tests for a web application using Cypress.
This project will help cement your understanding of Cypress and end-to-end testing.
