Javascript Testing Fundamentals

Learn testing principles and how to apply them to React applications using Jest and Testing Library.

---

Hi there! I'm Sandrina Pereira and I love refactoring code with the confidence of not breaking an app.

These are the material resources for my JS Testing Workshop.

Pre-Workshop requirements

To get the most out of the workshop, please do the following things in advance:

• Install Zoom to join the video call.
  • Turn on your video if possible, so we don't feel alone.
  • Keep your microphone muted to avoid background noises.
• Install a modern browser. Chrome or Firefox are recommended.
• Setup the project prior to the workshop to avoid unexpected installation issues.

The better prepared you are for the workshop, the more you will learn from it!

Setup the project

Installing

Git and NodeJS are required before proceding.

# Clone the repository
git clone https://github.com/sandrina-p/workshop-js-testing.git

# Go to the workshop folder
cd workshop-js-testing

# Install the dependencies
npm install

Quick Check-up

To ensure all is fine, please verify the three following things:

1. App running: Run npm start. The workshop app should start at http://localhost:1234
2. Testing tool: Run npm run checkup and verify the output matches this example.
3. Linters integrations: Integrate ESLint and Prettier in your editor. Then, restart your editor, open src/_checkup/index.test.js and follow the notes given with the light bulb emoji 💡.

• Did everything work? Ah-wesome! That's all, see you soon! 🤓
• Having troubles? Open an issue or reach me at [email protected].

Workshop Dynamic

The workshop consists of a set of challenges.
Each one introduces a new topic, followed with a code exercise for you to apply the concepts learned.
After each challenge, we'll go through the solution together and clarify questions.

src/
  challenges/  # Challenges
     *.md         # Exercise instructions
     *.test.js    # Where you'll be writing tests
  playgrounds/ # Code to be tested
  solutions/   # The final test solutions

Notes:

• Setup is done: All libraries/tools needed are already installed, ready to be used by you.
• Check solutions as a last resource. If you take a peek at the solution before even trying, you'll be sabotaging your own learning. It's okay to struggle while you try to solve the exercise, it's part of the learning process. :)
• Time expectations: I don't expect you to complete the entire exercises on time. The goal is to introduce you to new things, to make you think about them and ask me questions as we go through the content.
• Learning strategy: You won't write all the tests for each module. Instead, I'll point you to the tests with the biggest learning value.

// Test to be done:
it('must work', () => {
  // This gives you an idea of how many assertions you should do
  expect.assertions(3)

  // 💡 The light bulb emoji will guide you
  // 🍀 The lucky clover emoji will reveal tips & tricks
})

// Extra time? 😴 Go ahead and complete the missing tests
it.skip('might work', () => {
  // ...
})

License

This is only available for private, non-commercial use under the GPL version 3.