How to test code containing setTimeout / setInterval under the hood

We developers are very fond of unit tests, the usefulness of which is obvious. And so that these tests are really useful, and not bring pain, it is necessary to ensure their stability.

Our company develops the Wasaby interface framework and sells products built on its basis, which are cloud and desktop applications. The release cycle is tightly attached to the calendar, and continuous inegration processes are set up to control the quality of the product. We use Jenkins for assemblies and Mocha in conjunction with Chai assertfor unit testing JavaScript code. And recently, we were faced with a situation where assembly monitoring began to show that about half of all cases of their fall were due to unstable JavaScript unit tests. The symptoms are the same: a separate test from the set either does not have time to run, or returns the wrong result as expected. And the analysis of cases almost always reveals the fact that a test containing calls to the setTimeout or setInterval functions in its own or in the tested code crashes . About what to do in this situation, we will talk further.

Why it happens?

Everything is simple - inside the code that the developer is testing, an asynchronous call occurs, at the end of which the state of the environment somehow changes. And the test is designed to verify that this condition is as expected. But since Since we do not live in an ideal world, it happens that a test is written for code that already works in battle, and which was not originally prepared for this kind of testing. And the developer must decide how he can test such a code.

Consider a simple example, the code under test is a class method that asynchronously changes the state of an instance. And it is not written perfectly:

export class Foo {
  propToTest: boolean = false;
  methodToTest(): void {
    setTimeout(() => {
      this.propToTest = true;
    }, 100);
  }
}

? , setTimeout . c , (, 101 100 ). :

it('should set propToTest to true', (done: Function) => {
  const inst = new Foo();
  inst.methodToTest();
  setTimeout(() => {
    assert.isTrue(inst.propToTest);
    done();
  }, 101);
});

? , , .. , callback, setTimeout, . — , 2 , . , . -, . , , - , — -.
setInterval.

, . , . , , .

1. callback- , setTimeout/setInterval (" 1001 101, "). .
2. setTimeout() (" event loop, "). .
3. ( 1 2) — , , .

?

, , . , , : . .

1. — .. .
   , , :

   
   

   export function setProperState(inst: Foo) {
     inst.propToTest = true;
   }
   
   export class Foo {
     propToTest: boolean = false;
     methodToTest(): void {
       setTimeout(() => {
         setProperState(this);
       }, 100);
     }
   }

   
   

   :

   
   

   it('should set propToTest to true', () => {
     const inst = new Foo();
     assert.isFalse(inst.propToTest);
     setProperState(inst);
     assert.isTrue(inst.propToTest);
   });

   
   

   , setProperState methodToTest ( ). , : , . , , .

   
   

2. , , .
   , setTimeout :

   
   

   export class Foo {
     propToTest: boolean = false;
     constructor(readonly awaiter: Function = setTimeout) {
     }
     methodToTest(): void {
       this.awaiter(() => {
         this.propToTest = true;
       }, 100);
     }
   }

   
   

   -, :

   
   

   it('should set propToTest to true', () => {
     const awaiter = (callback) => callback();
     const inst = new Foo(awaiter);
     inst.methodToTest();
     assert.isTrue(inst.propToTest);
   });

   
   

3. , Promise.
   , — , . . . :

   
   

   export class Foo {
     propToTest: boolean = false;
     methodToTest(): Promise<void> {
       return new Promise((resolve) => {
         setTimeout(() => {
           this.propToTest = true;
           resolve();
         }, 100);
        });
     }
   }

   
   

   setTimeout:

   
   

   it('should set propToTest to true', () => {
     const inst = newFoo();
     return inst.methodToTest().then(() => {
       assert.isTrue(inst.propToTest);
     });
   });

   
   

   , , , " ". setTimeout , .

   
   

   export class Foo {
     propToTest: boolean = false;
     constructor(readonly asyncTimeout: number = 100) {
     }
     methodToTest(): void {
       return new Promise((resolve) => {
         setTimeout(() => {
           this.propToTest = true;
           resolve();
         }, this.asyncTimeout);
        });
     }
   }

   
   

   .

   
   

4. fake timers.
   Sinon.JS , . - ( ), setTimeout .
   :

   
   

   export class Foo {
     propToTest: boolean = false;
     methodToTest(): void {
       setTimeout(() => {
         this.propToTest = true;
       }, 100);
     }
   }

   
   

   fake timer, (!):

   
   

   let clock;
   
   beforeEach(() => {
     clock = sinon.useFakeTimers();
   });
   
   afterEach(() => {
     clock.restore();
   });
   
   it('should set propToTest to true', () => {
     const inst = newFoo();
     inst.methodToTest();
     clock.tick(101);
     assert.isTrue(inst.propToTest);
   });

   
   

   " " clock.restore(), .

   
   

- , . - , . , , .