Angular: Configure and test with jest

Want faster and simpler tests? In this article we are going to configure jest in an existing angular application.

In this article we are going to configure jest in an existing angular application.

To follow with the steps you can clone my github project, that we create in the Angular button: real world reusable component.

git clone https://github.com/fmaranflorentino/angular-reusable-components.git

Jest configuration

First of all, let’s remove all angular’s default testing libs:

npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter protractor

Delete karma.conf.js and test.ts.

Now let’s start add the right libs to our project:

npm install -D jest jest-preset-angular jest-axe @types/jest @types/jest-axe

Now let’s start the configuration of jest it self.

In your root folder create tsconfig.spec.json.

Here we add the following configuration:

Configuration for test suit

In your root folder create jest-setup.json.

Here we import jest-preset-angular and add jest-axe configuration.

jest-preset-angular import and jest-axe configuration

Now in your package.json you need to add a jest configuration object.

Let's also add the scripts to run tests with jest.

Jest configuration on package.json

--runInBand: Run all tests serially in the current process, rather than creating a worker pool of child processes that run tests. This can be useful for debugging. See docs.

--ci: When this option is provided, Jest will assume it is running in a CI environment. See docs.

Finally, we are ready for writing our component tests.

In this article we are going to use spectator a powerful tool to simplify angular tests.

npm install @ngneat/spectator --dev

Now let's work at the button.component.spect.ts. For this component we are going to test the following cases.

• Component create instance;
• Component snapshot;
• Component case color: secondary;
• Component type: outline;
• Component accessibility;

Snapshot Testing

Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly. See more about here.

Now let's write the tests.

Button tests spec file

SpectatorHost: It's an instance that contains the following properties: hostFixture, hostComponent, hostElement, hostDebugElement, component, element & debugElement.

createHostFactory: it returns a function that will create a fresh component in each it block, gives you the ability to test each functionality in an isolated environment.

cases: This const has the responsibility of store all the use cases of the component. And we reference it every time we create a new host.

toMatchSnapshot: when we create snapshot tests or edit an existing one, we need to update/create them with the script that we created earlier: npm run updateSnapshot

axe: jest-axe is an accessibility support lib for jest, that checks for accessibilities rules as the chrome plugin.

After writhing all these cases, we need to update our snapshots and run tests:

npm run updateSnapshot && npm test.

the result should be like this:

Remember that you need to export you ButtonComponent in the module.

I hope you did like the article, see you soon!