From 852b5347e65fca7b21d8a3300e46843efe5416c6 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Tue, 5 Mar 2019 03:30:40 -0800 Subject: [PATCH] Jest step updates --- bonus-jest/demo/README.md | 22 ++++++++++++++-------- index.html | 2 +- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/bonus-jest/demo/README.md b/bonus-jest/demo/README.md index 957f759..f347a02 100644 --- a/bonus-jest/demo/README.md +++ b/bonus-jest/demo/README.md @@ -6,25 +6,25 @@ In this exercise, we will work on implementing simple unit tests using Jest. -## Jest Features +## Jest features - Multi-threaded and isolated test runner -- Provides a fake browser-like environment if needed (window, document, DOM, etc) using jsdom +- Provides a fake browser-like environment if needed (window, document, DOM, etc) using [jsdom](https://github.com/jsdom/jsdom) - Snapshots: Jest can create text-based snapshots of rendered components. These snapshots can be checked in and show API or large object changes alongside code changes in pull requests. - Code coverage is integrated (`--coverage`) - Very clear error messages showing where a test failure occurred ## How to use Jest -- Using `create-react-app` or other project generators, Jest should already be pre-configured. Running `npm test` usually will trigger it! -- A `jest.config.js` file is used for configuration -- `jsdom` might not have enough API from real browsers, for those cases, polyfills are required. Place these inside `jest.setup.js` and hook up the setup file in `jest.config.js` -- in order to use `enzyme` library to test React Components, more config bits are needed inside `jest.setup.js` +Using `create-react-app` or other project generators, Jest should already be pre-configured. Running `npm test` usually will trigger it! + +Setting up Jest in a new project is outside the scope of this course, but if you're interested in how it works, take a look at the bootcamp project's `jest.config.js` and `jest.setup.js` files or the [getting started documentation](https://jestjs.io/docs/en/getting-started). ## What does a test look like? ```ts -// describe(), it() and expect() are globally exported, so they don't need to be imported when jest runs these tests +// describe(), it() and expect() are globally exported, +// so they don't need to be imported in each test file describe('Something to be tested', () => { it('should describe the behavior', () => { expect(true).toBe(true); @@ -32,6 +32,12 @@ describe('Something to be tested', () => { }); ``` +- `describe()` takes a string describing the thing to be tested (often a component or file name) and a function which runs tests. +- `it()` takes a string describing the behavior to be tested and a function to run the test. +- `expect()` takes the actual value as a parameter and returns an object with various "matcher" methods to test against an expected value/condition. `toBe` is just one of [many available matchers](https://jestjs.io/docs/en/expect). + +> When choosing test names, think of the strings passed to `describe` and `it` as forming a sentence. For example, inside `describe('MyComponent', ...)` you might have a test `it('renders some text', ...)`, which forms the sentence a sentence describing the behavior: "MyComponent renders some text." + ## Testing React components using Enzyme [Enzyme](https://airbnb.io/enzyme/) is made by Airbnb and provides utilities to help test React components. @@ -88,7 +94,7 @@ it('some test function', () => { Read more about jest mocking [here](https://jestjs.io/docs/en/mock-functions.html). -### Async Testing +### Async testing For testing async scenarios, the test runner needs some way to know when the scenario is finished. Jest tests can handle async scenarios using callbacks, promises, or async/await. diff --git a/index.html b/index.html index 7693193..a7eadb6 100644 --- a/index.html +++ b/index.html @@ -145,7 +145,7 @@
  • - jest: testing code + Testing with Jest
    demo | exercise