Jest — A JS testing framework used by Facebook My experience unit testing Premiere , a Javascript library I've published to facilitate consuming RESTful APIs and one of my goals to make this library reliable was to achieve 100% test coverage or at least close to that. I recently posted about Premiere To do so, my first choice was to choose the how to do it; so I started reading about the popular Mocha/Chai/Sinon + Istanbul for test coverage. Although I got to setup the basic testing environment and script, my experience was very painful; using made testing even more difficult than it should be. Typescript If you are used to Karma, Jasmine, Mocha/Chai/Sinon and happy with them, that’s good too. This post is about the experience I've had so far with these technologies. After a lot of hustle, time spent, and packages imported, the test and were still not working for me. To do simple tests I had to import stuff in my code from many libraries, some from , some other from , others from and it all looked very difficult and confusing; plus, I was working with Typescript and needed all the typings. By the end I was very frustrated it all turned out to deviate me from the main focus, which was to write tests, not to do configurations. watcher coverage chai sinon sinon-chai Doing some research I found out about Jest, a testing framework created and used by . At first I thought it was designed to be used with React projects only, but going through the I started to notice how powerful and easy to setup it was. Even better, there is a for handling Typescript without a sweat. Facebook Jest Homepage nice package Setting up Jest was easy like a breeze, it has a nice watcher and the test coverage works out of the box. The whole flow felt very smooth, having everything in on place made it a lot easier, the api was very helpful too. well documented Once everything was in place, it was just a matter of going through each functionality and making sure everything was covered to get the . The basic functions, , and were enough in most of the cases and the support to took care of the rest. To help isolating each test, creating mocks with also was of great help. so desired 100% coverage ❤ describe it expect Promise jest.fn() Let's see some code, so this doesn't sound so much as free marketing for Facebook. The following code is written in and refers to 's . Typescript Premiere Cache class To get started, let's import the main class. I followed the pattern of placing the in the same folder as the "original" file. .spec.ts Cache './Cache'; import from Now let's set our block and prepare some variables for our tests, so we make our lives easier. Notice that we're using variables with type , so we don't need to import more stuff other than Cache, with the goal of trying to make our more isolated. describe any spec describe('Cache', () => { cache: Cache; model: ; list: []; promise: = 'promise instance'; let let any let any let any Now, before each test we'll initialize our variables. beforeEach(() => {cache = Cache( );model = {key: jest.fn().mockReturnValue('id')};list = [model];}); new null To get a hold of how it works, let's look at a couple tests. it('should set api on construct', () => {cache = Cache('api' as );expect(cache.api).toBe('api');}); new any it('should resolve key from object', () => {expect(Cache. (model)).toBe('id');}); resolveKey it('should set list', () => {cache.setList('list', list);expect(cache.lists['list']).toBe(list);}); If you wish to see the entire file, please refer to https://github.com/pedsmoreira/premiere/blob/master/lib/premiere/Cache.spec.ts The configuration The Jest configuration is dead simple. Just added these parts to . package.json Scripts: “test”: “jest — coverage — no-cache ${1}”,“test-watch”: “jest ${1} — watch”, Dev Dependencies: "@types/jest": "^16.0.2","jest": "^18.0.0","ts-jest": "^18.0.0", And finally the "jest" block. This part is only necessary because the project uses Typescript. Don't get scared, this is mostly boilerplate that are nicely documented by . ts-jest "jest": {"moduleFileExtensions": ["ts","js"],"transform": {"\\.(ts)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"},"testRegex": "lib/.*\\.spec.(ts|js)$","testResultsProcessor": "<rootDir>/node_modules/ts-jest/coverageprocessor.js","globals": {"__TS_CONFIG__": {"target": "es6","module": "commonjs","moduleResolution": "node"}}} The full package.json is available at https://github.com/pedsmoreira/premiere/blob/master/package.json So if you have a chance, with or without, give a try, you may surprise yourself. It’s very nice to feel that things “just work” \o/ Jest I hope you enjoy :)

Facebook

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

From 0 to 100% Coverage Real Quick

Too Long; Didn't Read

Companies Mentioned

Pedro Silva Moreira

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

From 0 to 100% Coverage Real Quick

Too Long; Didn't Read

Companies Mentioned

Pedro Silva Moreira

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES