Setup and Teardown

Often while writing tests you have some setup work that needs to happen before tests run, and you have some finishing work that needs to happen after tests run. Jest provides helper functions to handle this.

Repeating Setup

If you have some work you need to do repeatedly for many tests, you can use beforeEach and afterEach hooks.

For example, let’s say that several tests interact with a database of cities. You have a method initializeCityDatabase() that must be called before each of these tests, and a method clearCityDatabase() that must be called after each of these tests. You can do this with:

  1. beforeEach(() => {
  2.   initializeCityDatabase();
  3. });
  5. afterEach(() => {
  6.   clearCityDatabase();
  7. });
  9. test('city database has Vienna', () => {
  10.   expect(isCity('Vienna')).toBeTruthy();
  11. });
  13. test('city database has San Juan', () => {
  14.   expect(isCity('San Juan')).toBeTruthy();
  15. });

beforeEach and afterEach can handle asynchronous code in the same ways that tests can handle asynchronous code - they can either take a done parameter or return a promise. For example, if initializeCityDatabase() returned a promise that resolved when the database was initialized, we would want to return that promise:

  1. beforeEach(() => {
  2.   return initializeCityDatabase();
  3. });

One-Time Setup

In some cases, you only need to do setup once, at the beginning of a file. This can be especially bothersome when the setup is asynchronous, so you can’t do it inline. Jest provides beforeAll and afterAll hooks to handle this situation.

For example, if both initializeCityDatabase() and clearCityDatabase() returned promises, and the city database could be reused between tests, we could change our test code to:

  1. beforeAll(() => {
  2.   return initializeCityDatabase();
  3. });
  5. afterAll(() => {
  6.   return clearCityDatabase();
  7. });
  9. test('city database has Vienna', () => {
  10.   expect(isCity('Vienna')).toBeTruthy();
  11. });
  13. test('city database has San Juan', () => {
  14.   expect(isCity('San Juan')).toBeTruthy();
  15. });

Scoping

The top level before* and after* hooks apply to every test in a file. The hooks declared inside a describe block apply only to the tests within that describe block.

For example, let’s say we had not just a city database, but also a food database. We could do different setup for different tests:

  1. // Applies to all tests in this file
  2. beforeEach(() => {
  3.   return initializeCityDatabase();
  4. });
  6. test('city database has Vienna', () => {
  7.   expect(isCity('Vienna')).toBeTruthy();
  8. });
  10. test('city database has San Juan', () => {
  11.   expect(isCity('San Juan')).toBeTruthy();
  12. });
  14. describe('matching cities to foods', () => {
  15.   // Applies only to tests in this describe block
  16.   beforeEach(() => {
  17.     return initializeFoodDatabase();
  18.   });
  20.   test('Vienna <3 veal', () => {
  21.     expect(isValidCityFoodPair('Vienna', 'Wiener Schnitzel')).toBe(true);
  22.   });
  24.   test('San Juan <3 plantains', () => {
  25.     expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);
  26.   });
  27. });

Note that the top-level beforeEach is executed before the beforeEach inside the describe block. It may help to illustrate the order of execution of all hooks.

  1. beforeAll(() => console.log('1 - beforeAll'));
  2. afterAll(() => console.log('1 - afterAll'));
  3. beforeEach(() => console.log('1 - beforeEach'));
  4. afterEach(() => console.log('1 - afterEach'));
  6. test('', () => console.log('1 - test'));
  8. describe('Scoped / Nested block', () => {
  9.   beforeAll(() => console.log('2 - beforeAll'));
  10.   afterAll(() => console.log('2 - afterAll'));
  11.   beforeEach(() => console.log('2 - beforeEach'));
  12.   afterEach(() => console.log('2 - afterEach'));
  14.   test('', () => console.log('2 - test'));
  15. });
  17. // 1 - beforeAll
  18. // 1 - beforeEach
  19. // 1 - test
  20. // 1 - afterEach
  21. // 2 - beforeAll
  22. // 1 - beforeEach
  23. // 2 - beforeEach
  24. // 2 - test
  25. // 2 - afterEach
  26. // 1 - afterEach
  27. // 2 - afterAll
  28. // 1 - afterAll

Order of Execution

Jest executes all describe handlers in a test file before it executes any of the actual tests. This is another reason to do setup and teardown inside before* and after* handlers rather than inside the describe blocks. Once the describe blocks are complete, by default Jest runs all the tests serially in the order they were encountered in the collection phase, waiting for each to finish and be tidied up before moving on.

Consider the following illustrative test file and output:

  1. describe('describe outer', () => {
  2.   console.log('describe outer-a');
  4.   describe('describe inner 1', () => {
  5.     console.log('describe inner 1');
  7.     test('test 1', () => console.log('test 1'));
  8.   });
  10.   console.log('describe outer-b');
  12.   test('test 2', () => console.log('test 2'));
  14.   describe('describe inner 2', () => {
  15.     console.log('describe inner 2');
  17.     test('test 3', () => console.log('test 3'));
  18.   });
  20.   console.log('describe outer-c');
  21. });
  23. // describe outer-a
  24. // describe inner 1
  25. // describe outer-b
  26. // describe inner 2
  27. // describe outer-c
  28. // test 1
  29. // test 2
  30. // test 3

Just like the describe and test blocks Jest calls the before* and after* hooks in the order of declaration. Note that the after* hooks of the enclosing scope are called first. For example, here is how you can set up and tear down resources which depend on each other:

  1. beforeEach(() => console.log('connection setup'));
  2. beforeEach(() => console.log('database setup'));
  4. afterEach(() => console.log('database teardown'));
  5. afterEach(() => console.log('connection teardown'));
  7. test('test 1', () => console.log('test 1'));
  9. describe('extra', () => {
  10.   beforeEach(() => console.log('extra database setup'));
  11.   afterEach(() => console.log('extra database teardown'));
  13.   test('test 2', () => console.log('test 2'));
  14. });
  16. // connection setup
  17. // database setup
  18. // test 1
  19. // database teardown
  20. // connection teardown
  22. // connection setup
  23. // database setup
  24. // extra database setup
  25. // test 2
  26. // extra database teardown
  27. // database teardown
  28. // connection teardown

Setup and Teardown - 图1note

If you are using jasmine2 test runner, take into account that it calls the after* hooks in the reverse order of declaration. To have identical output, the above example should be altered like this:

  1.   beforeEach(() => console.log('connection setup'));
  2. + afterEach(() => console.log('connection teardown'));
  4.   beforeEach(() => console.log('database setup'));
  5. + afterEach(() => console.log('database teardown'));
  7. - afterEach(() => console.log('database teardown'));
  8. - afterEach(() => console.log('connection teardown'));
  10.   // ...

General Advice

If a test is failing, one of the first things to check should be whether the test is failing when it’s the only test that runs. To run only one test with Jest, temporarily change that test command to a test.only:

  1. test.only('this will be the only test that runs', () => {
  2.   expect(true).toBe(false);
  3. });
  5. test('this test will not run', () => {
  6.   expect('A').toBe('A');
  7. });

If you have a test that often fails when it’s run as part of a larger suite, but doesn’t fail when you run it alone, it’s a good bet that something from a different test is interfering with this one. You can often fix this by clearing some shared state with beforeEach. If you’re not sure whether some shared state is being modified, you can also try a beforeEach that logs data.