Jest Playground
An interactive hub designed to supercharge Next.js unit test education through community and experimentation.
Overview
As self proclaimed test addicts, our mission is to help other developers realize how fun, fast, & rewarding writing tests can be!
Studies show that developers has 4 preferred ways of learning: Visual, Auditory, Reading / Writing, and Kinesthetic.
We have made it our goal to construct a single resource powerful enough to support all 4 preferred learning styles in one shot.
We believe we have done this by introducing the Jest Playground that provides developers with:
- Visual tutorials and examples of tests case scenarios.
- The ability to clone the repo and play with demo tests first hand for Kinesthetic learners.
- In-depth tutorials for Reading with the ability to practice Writing and running new tests in the playground
- Video tutorials that Auditory learners can listen to and learn as they follow along. (ETA TBD)
Check out the Jest Playground Repository
Resources
The Jest Playground is a phenomenal resource that will assist you in quickly implementing unit tests. We encourage developers to clone and modify existing templates, starter kits, and demo tests to meet their needs before attempting to create a new test from scratch. If you feel that your test case has not been covered by existing tests or tutorials, we would love to hear about it! Furthermore, we'd love to help you write your tests!
Executable tests
This repository contains an extensive test suite of executable demo tests covering everything from accessibility to component call back execution.
In its current state, this library of tests should cover close over 70% of a developers test case needs.
The team is also committed to adding new demos with each new test case we see.
Tutorials
These tutorials break down the anatomy NextJs TypeScript & JSX tests to from the initial test arrangement to the final test assertion.
Boiler plate templates
Boiler plate templates that promote the DRY rule by encouraging devs to copy and modify boiler plate test templates to fit their needs.
Starter Kits
Starter kits have been made available for component and function testing.
These kitchen sink style starter kits are comprised of every possible example test you can imagine.
A developer can simply remove what they do not need and modify the ones that do to fit their specific needs.
Install
Installing the Jest Playground locally is as simple as cloning the repo, running the install command.
Once completed, you'll be ready to start playing with real live demo tests.
Step 1: Clone
Clone the Jest Playground:
git clone https://github.com/charlesschwab/jest-playground.git
Step 2: Build
Install Jest Playground dependencies:
pnpm i
Step 3: Run Tests
Run all tests:
pnpm test
Watch all tests:
pnpm test:watch
Learning
The Jest Playground has been designed to support multiple learning styles. To get started, please find the section that best describes your learning preference to see suggestions on ways to get started.
Kinesthetic Learners
If you learn best through physical activities such as touching, moving, or performing hands-on tasks, we suggest installing the Jest Playground into your local setup.
Once you've installed the Jest Playground locally, you can start interacting with demo tests in real time by running pnpm test:watch
Go ahead, break something and see what happens!
Read / Write Learners
If you feel that you learn faster and retain more when reading docs and writing out code based on what you've learned:
We suggest you start off by diving in to our tutorials library. Once you're comfortable, install the Jest Playground, and try writing a test!
To introduce a test locally, copy a template outline, place your logic within it, and then place it within a components `test' directory.
Run pnpm test:watch and your test will run on save.
Visual Learners
If you learn best by seeing examples of tests, we suggest focusing on our functional library of Schwab Next.js unit tests.
These are executable tests written in the AAA structure that should be simple to visually digest.
We are also supporting visual learners by preparing a video series comprised of step by step walkthroughs of Schwab Next.js & Jest Playground tests.
An ETA for this series is TBD. Please "watch" this page for updates*.*
Until this video series is available, we encourage you to reach out to @kyle-bluff_schwab to schedule a training call.
Auditory Learners
If you are an Auditory learner, we preparing a video series consisting of step by step walkthroughs of NextJs & Jest Playground tests.
An ETA for this series is TBD. Please "watch" this page for updates*.*
Until this video series is available, we encourage you to schedule time with for a one on one training session.
Contributing
The Schwab CMS community is a group of driven ReactJs/NextJs developers eager to help others learn how to test and we thank you for your interest in contributing to the project!
To submit a pull request or push a change please follow these steps:
Project setup
- Fork and clone the repo
- Run pnpm i to install dependencies
- Run pnpm test to validate that you've got it working
- Create a branch for your PR
Requirements
- All unit tests should pass after changes have been implemented
- All linting scans should pass without errors or warnings
- Any relevant documentation should be updated or added to the "docs" directory
Formatting
Please ensure your code complies with the Unit Testing Standards outline.