Testing Angular Faster with Jest

Jest looks like a big improvement over Karma. But actually something exists that is even better into terms of feedback speed and quality: wallabyjs. Try it out!

I can't seem to figure out how to get webpack to run through it's loaders first, like angular2-template-loader to do what your preprocessor is doing. Is there a way to get jest to kick off a webpack bundle first?

kpax Running your code through Jest and Webpack are two different things. One doesn’t know about the other. Here you’ll find a Webpack tutorial on official Jest docs. You’ll probably need to adjust moduleNameMapper to suite your needs. You can also submit an issue on jest-preset-angular and we’ll see what can be done. Good luck!

Feel like I'm being dumb and missing something, but is this for ejected CLIs?
Using on a project out of the box I get: `SyntaxError: Unexpected token import` as it runs through each of the tests.

I was excited about trying to add Jest to my Angular 4.x/AngularCli project. Thank you for the post. However, In following the instructions, I am seeing an error when Jest tries to load the setupJest.ts file:

/Users/bradyisom/Development/buzz/src/setupJest.ts:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){require('ts-jest').install();import 'jest-preset-angular';
^^^^^^
SyntaxError: Unexpected token import

at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
at handle (node_modules/worker-farm/lib/child/index.js:41:8)
at process. (node_modules/worker-farm/lib/child/index.js:47:3)
at emitTwo (events.js:106:13)

Any ideas on what is wrong here?

Dominic, Brady, just for the record, this was resolved in jest-preset-angular repo: https://github.com/thymikee/jest-preset-angular/issues/4

Do you have a github repo where we can see some examples of how to test angular components and services using Jest?

hotelyorba, I have an example directory in jest-preset-angular repo:
https://github.com/thymikee/jest-preset-angular/tree/master/example
But in general you can test components, services, reducers, etc the same way as with Jasmine, provided that you're not using unsupported methods (like jasmine.createSpyObj()).

Hello there,
very nice article. i manage to execute 208 tests in around 30 secs in the best case. which is quite good, but i want it even faster. the problem seems to be in some initial step, as only the first tests take long (6 - 10 secs -> each worker ) and the following up are really quick.

-> watch mode 2 specs changed:

PASS src/app/features/geofencing/geofencing.component.spec.ts (5.593s)

PASS src/app/features/geofencing/geo-definition/geo-definition.component.spec.ts (9.75s)

Test Suites: 2 passed, 2 total
Tests: 16 passed, 16 total
Snapshots: 0 total
Time: 10.709s, estimated 11s

-> watchAll -w=8

Test Suites: 5 failed, 41 passed, 46 total
Tests: 202 passed, 202 total
Snapshots: 0 total
Time: 31.418s

do you have any idea to investigate what takes so long initially? i am using uptodate versions of ng (4.0.1) and ng-cli (1.0.0)

Cheers Andi

Hey danAnderl!
The following runs are faster, because the cache is "warm". On the first run Jest scans all necessary files and transform them from TypeScript to JS. Transforming takes some time, so the results (JS files) are cached – this way the files are only transformed through tsc (or any other transformer, e.g. babel) only once, and after they're changed.
Glad it works for you!

Thanks for the great article and project ... I still have a question concerning Snapshot testing ... is there an equivalent to the react-renderer i can use in Angular projects?

Jan, working on it!

Hey folks, it's now possible to snapshot your Angular components: https://github.com/thymikee/jest-preset-angular/pull/24
Happy testing! :)

Thank you so much for the post. Your approach and the Jest framework look very interesting. I have my own Angular* skeleton project that I've been working on. I tried to integrate your approach, but am running into some issues. Namely, I keep getting an error trying to run the tests relating to zone-node.js. If you would be willing to look, the repository is on GitHub: https://github.com/PdUi/angular-aspnet-skeletons/tree/jest-integration/ng-custom
I assume you ran into a similar issue and would greatly appreciate any help you could offer.

Thanks again for the very informative post!!!

Eniep Yrekcaz, checkout the PR I sent you :)

You are awesome. I really appreciate it!!!

Michal Pierzchala, what's the benefit of using Jest with Webpack rather than running it normally?

Andrew Krueger, I'm sorry, but I don't know what are you referring to. Please be more specific.

when trying to configure jest to run with coverage I get an error :
Failed to write coverage reports:
ERROR: RangeError: Maximum call stack size exceeded
STACK: RangeError: Maximum call stack size exceeded

Jon Caris, that doesn't tell much. But if you can provide a repository with the reproduction of the problem, please post it on Jest issue tracker

Awesome! I have been able to integrate Jest into an Ionic2 project with a little change following the instructions in this article. Really easy to set-up.

Many thanks for the article

i using material2
i could not test ( dependency material2 components files )
how do i do?

This article is awesome and the angular jest preset is great. I'm having one little issue that I hope you can help with. When I change one file, jest runs all of my tests rather than the tests relating to the file that changed, do you know why this is?

Nice article. Any suggestion why the paths in the tsconfig seem not to be resolved?
My tests are crashing when using absolute imports based on the paths defined there.

Do you have an example of how to set up jest in a multi-app environment in angular-cli?

Bad day:
FAIL src/app/app.component.spec.ts
● Test suite failed to run

TypeError: Cannot read property 'clearImmediate' of undefined

at new FakeTimers (node_modules/jest-util/build/fake_timers.js:106:29)
at new JSDOMEnvironment (node_modules/jest-preset-angular/testEnvironment.js:27:23)

Test Suites: 2 failed, 2 total
Tests: 0 total
Snapshots: 0 total
Time: 0.56s, estimated 1s
Ran all test suites.
npm ERR! Test failed. See above for more details.

Well, this works fine for simple setups. As soon as you have some 3rd-party modules, the "painless" becomes "nightmare". Jest babel ignores, by default, everything in node_modules and you can either hack it to stop ignoring specific modules, or you have to mock all the stuff in the modules, otherwise you get errors like "SyntaxError: Unexpected token export". Good luck with the mocking.

Does anyone know of any tutorials or links about testing Angular routing with Jest? I have a really simple sample project with e2e and test coverage plus reporting for a CI/CD. Currently all the tests work except routing to an unknown route.

const routes = AppRoutingModule.applicationRoutes;

beforeEach(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes(routes)],
declarations: [HomeComponent, AppComponent, PageNotFoundComponent]
});

router = TestBed.get(Router);
location = TestBed.get(Location);

fixture = TestBed.createComponent(AppComponent);
router.initialNavigation();
});

it(
'navigate to "/abcdefghij" redirects you to /pagenotfound',
fakeAsync(() => {
router.navigate(['abcdefghij']).then(
() => {
expect(router.url).toBe('/pagenotfound');
},
() => {
fail('Failed to open page');
}
);
})
);

Thanks

https://github.com/zebslc/angular5mat

After adding your jestGlobalMocks.ts to setupJest.ts and importing the setupJest.ts like below:
setupTestFrameworkScriptFile: "/src/setup-jest.ts",
I am expecting sessionStorage.getItem to have been called like below:
global.sessionStorage.setItem('appInitData', JSON.stringify(plContext));
expect(service.plContext).not.toBeNull();
expect(global.sessionStorage.getItem).toHaveBeenCalled();

But, I get an error saying:
expect(jest.fn())[.not).toHaveBeenCalled()

jest.fn() value must be a mock function or spy.
Received:
function: [Function getItem]

Can you please help? I feel like I am close to getting it resolved. I am not using any jest.mock() or jest.spyOn() for sessionStorage since I believe it's already mocked in the jestGlobalMocks.ts. Correct me if I am wrong. Thanks in advance.

This article is educational but misses one vital example. An example test with angular using Jest. Wasn't that what this article was all about...?

jest.fn({ key: jest.fn()})

That's not even valid

Error: "Argument of type '{ key: jest.Mock; }' is not assignable to parameter of type '(...args: any[]) => unknown'.
Object literal may only specify known properties, and 'key' does not exist in type '(...args: any[]) => unknown'.ts(2345)"

Not sure if I missed something or if its just a mistake here, but was brought here by the Jest documentation and found one part kind of confusing. For the setup file, you said to put it in my root directory and name it "setup-jest.ts" but then in the jest.config.js file you specify '/src/setupJest.ts'.

This was a bit hard to figure out what was needed, I tried to change it to remove /src/ and rename the config reference to '/setup-jest.ts' but then I was getting a bunch of errors. I just tried again by moving the setup-jest.ts into the /src/ folder and that seemed to solve all my issues.

So does the article need to be fixed to say "put setup-jest into your src folder" instead of root folder? and then the file name be fixed?