- Before each test, time-related functions like
setIntervalare patched to use fake time instead of actual time.
- Within a test, an API call can be made to advance the clock by a specified number of fake milliseconds.
- After each test, the patched functions are restored.
Running tests with fake time avoids having to wait for actual time to elapse and it also makes the tests much simpler, as they run synchronously.
So what does this have to do with RxJS?
RxJS has its own concept of fake time — which is named virtual time. In RxJS, all time-related functionality is implemented in schedulers and there is a particular scheduler for virtual time: the
To test RxJS-based code with virtual time, any schedulers used — either explicitly or implicitly — need to be swapped for an instance of the
Unfortunately, that’s not always easy to do. And using the
VirtualTimeScheduler won’t help if the code under test also includes time-related, non-RxJS code, as the virtual and fake time concepts differ significantly.
Let’s have a look at how it can be used.
Testing an Angular component
Here’s a simple Angular component that uses Reactive forms:
Whenever the search term’s
input changes, the form’s value is debounced and repeated values are ignored. If the resultant search term isn’t an empty string, the searching indicator is shown. The component doesn’t do anything useful; it does just enough to give us something to test.
We could test that the searching indicator exhibits the expected behaviour with a test something like this:
fakeSchedulers calls Angular’s
fakeAsync, so fake time is advanced the same way: by calling
The above test triggers the form’s
valueChanges by dispatching an event. It could also trigger the change using an explicit call to the form’s
patchValue method, like this:
Testing a React component
Here’s a React version of the Angular component:
If you’ve not seen how
recompose can be used to compose observable-based components in React, this talk by Andrew Clark is well worth watching.
To test the component with fake time, we could do something like this:
Unlike Angular, Jasmine and Sinon.JS, Jest does not patch
Date. In particular, it does not patch
fakeSchedulers needs to keep track of the current fake time — as the RxJS scheduler implementations depend upon
Date.now. To do this, fake time needs to be advanced by calling the
advance function that’s passed to the test, instead of
Testing with AVA, Mocha or Tape
These test frameworks don’t include built-in support for testing with fake time, but Sinon.JS supports it and it’s easy to use.
For example, this is what testing with fake time using Sinon.JS looks like in Mocha:
After writing this article, a related PR was merged into the RxJS repository. The PR fixes the one problem that prevented the RxJS schedulers from working with Angular’s
fakeAsync. The problem was that RxJS captured
Date.now before it could be patched by
So with RxJS versions later than 6.2.1,
fakeSchedulers should not be required for Angular tests — just use
fakeAsync, instead. However,
fakeSchedulers will still be necessary for any non-Angular tests run using Jasmine and for any tests run using other frameworks, when fake time is needed.
This post is also published on my personal blog: ncjamieson.com.