This commit is contained in:
Elizabeth Craig 2019-03-05 03:30:40 -08:00
Родитель bdb17109a1
Коммит 852b5347e6
2 изменённых файлов: 15 добавлений и 9 удалений

Просмотреть файл

@ -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.

Просмотреть файл

@ -145,7 +145,7 @@
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
jest: testing code
Testing with Jest
<div class="Tile-links">
<a target="_blank" href="./bonus-jest/demo/">demo</a> | <a target="_blank" href="./bonus-jest/exercise/">exercise</a>
</div>