WIP - This is the repo for my React TDD Workshop
Welcome to my React TDD workshop!
npm i
npm testWatch mode:
Terminal 1:
npm startTerminal 2:
npm run test:watchWe will be building the Tic Tac Toe game, using React + Jest + Puppeteer, all TDD, (almost) without openning the browser!
The end result will be something like this:
- Browser test for starting a new game.
- Browser test for displaying 'X' after first user click.
- Browser test for 'X' user winning the game.
- Component test for displaying 'O' after second user click.
- Component test for 'O' user winning the game.
- Refactor winning logic to a separate method + add unit test for it.
- Complete game winning logic: write unit tests for the different game winning scenarios (all rows, columns/diagonals/tie).
- Write a component test verifiying a user cannot press a non empty cell.
- Write a component test for a tie (show a "It's a tie!" message).
- Write a browser/component test for marking next user in a special color (show 'X' and 'O' users and mark next user in special color).
- Write a browser/component test for hiding registration form after game starts.
- Write a browser/component test for hiding game board before game starts.
- Bonus: Write a browser test for user saving / loading existing game state (use local storage for that)
- Bonus: Write a browser test for displaying the number of wins next to each user: Win a game. Press a "new game" button, and win the game again. (Use local storage for that as well)
- jest-puppeteer - (almost) zero configuration preset to run your tests with Jest and Puppeteer
- enzyme
- jsdom
- jest
- Jest Projects (setup multi environments on the same project. See here for example
- Applitools eyes.
- eyes.it - eyes for protractor
- Puppeteer Egghead course