Recently, QA teams started to test Angular applications in an alternative way – using Jest. It happened in terms of Jest’s speed and unit-focused conception. Let’s discover how to utilize Jest for Angular component testing!

What is an Angular component?

In Angular documentation, the component is the main building block that includes the data and UI logic and defines the styles of the View which is to be displayed at the target app. Each component in Angular has three elements:

• HTML template. With Angular-specific syntax for data binding, directives, and event handling, it defines the view/structure of the component directives and updates the UI based on user interactions and dynamic data changes.
• TypeScript class. It contains the component business logic – processing user inputs, handling data, or interacting with services – and defines properties, methods, and lifecycle hooks that control the behavior of the component.
• Metadata. It provides additional information about Angular’s components (selector, template, style, and other properties) to understand how it should be used within the application at run time execution.
  

Angular Component LifeCycle

Every Angular component goes through a few different stages called lifecycle hooks that help software developers execute the custom logic of the app. They are the following:

1. Creaction.  The component is created and its dependencies are injected.
2. Change Detection. Angular checks for changes in the data-bound properties.
3. Rendering. The component’s template is rendered or updated.
4. Destruction. The component is destroyed and cleaned up.

Angular executes lifecycle hooks to help developers execute code at specific stages of the component’s lifecycle:

• ngOnChanges – a method that responds when a change in the parent component needs to trigger an action in the child component to keep them in sync.
• ngOnInit – a method that initializes the component after Angular has set the input properties.
• ngDoCheck – a method that detects and responds to changes in the component’s input properties.
• ngAfterContentInit – a method that is executed after the component’s content has been initialized.
• ngAfterContentChecked – a method that responds after Angular checks the content projected into the directive or component.
• ngAfterViewInit – a method that is called when the bindings of the children’s directives (or components) have been checked for the first time.
• ngAfterViewChecked – a method that is called after every check of the component’s views.
• ngOnDestroy – a method that is triggered when a component/directive is going to be destroyed.

Why you should unit test?

When it comes to component angular testing, you need to take into account the unit tests. They have a focus on testing small and isolated pieces of code.

With unit tests, you can get information on how the code should behave and understand what the code is doing without the need to have external resources. They guarantee that every component of your application operates as intended when used alone.

Why you should mock?

To make sure you can concentrate on the code that has to be tested, you must properly mock external dependencies. Mocking means creating a replica of any external dependencies in your code. You replace the services, functions, or objects that your code interacts with, with a fake version that mimics the original dependencies. Still, they do not need to replicate all their functionalities.

Mocking dependencies in Angular tests replace a dependency with a simulated object that can imitate its behavior and interactions. In this type of test, you can replace the services, functions, or objects that your code interacts with, with a fake version that mimics the original dependencies. Still, they do not need to replicate all their functionalities.

However, when you use mocks in your tests in Angular unit testing, you should take into account the following:

→ The mock should have the same methods, properties, and return types as the original dependency.
→ In the context of the test, the mock needs to be detailed enough to act as the original.
→ If you change the original dependency, you need to update the mocks to avoid false positives in tests.

Advantages of mocking

• When mocking, you test only the component’s logic and don’t need additional recourses.
• You run tests faster as you don’t have to wait for real dependencies to respond.
• You receive consistent test results as mocks replicate the original dependencies and behave the same way.
• With mocks, you can detect issues by simulating scenarios that are difficult to reproduce in a real environment. 
• When mocking, you isolate tests to be executed in parallel for faster testing.

Disadvantages of not mocking

• In real implementation, you have been forced to mock all of the properties, methods, etc. and the scope of your test expands.
• You have to declare the nested components and provide all of its dependencies.
• It takes longer for your tests to execute since the complete dependency tree must be resolved first.
• The test state might include errors.
• In terms of dependency downstream changes, tests can start indicating problems.
• You face difficulties when debugging the tests.  
• Refactoring becomes harder because you can’t easily isolate the tests.
• It is getting longer to detect failures because they could originate in any of its dependencies or, for example, deep in the tree.

Angular Component testing: Playwright VS Jest?

Jest

• Specifically designed for unit tests. In Jest, you can isolate and test small code units. This means that Jest’s concept aligns with the concept of unit testing components.
• Rich toolset. It includes all the necessary tools and features to carry out unit testing – mocking, spying, and assertion libraries.
• Fast Test Runs. Without the need for real dependencies, you can run unit tests very quickly and avoid test flakiness.
• Better code coverage. Jest can be integrated well with code coverage tools to track a unit testing process and generate a component’s code coverage.
• Integration with Angular. Developers can set up and run tests with ease in terms of Angular’s built-in support for Jest.
• Large community and excellent documentation. If you have difficulties with the project, you can look through well-prepared documentation, find examples of Jest plugins, or ask questions to the active community.

Playwright

• Real Browser Environment. With Playright, you can test your project against actual browser rendering and behavior without the need to mock the DOM.
• Auto-waits Option. When testing component interactions, Playwright’s auto-waits feature allows you to easily conduct asynchronous testing without the need to control timeouts within manually playwright component testing.
• No use of globals.  Playwright does not use any globals for its test runner so that can quickly and reliably verify the behavior of each component without the need to introduce complex synchronization mechanisms to modify global variables.
• Easy Setup. If you carry out e2e testing in Plywright, you can also use it for Playwright component unit testing without the need for a separate testing environment.  

We know that Playwright is better for e2e testing, but it can be also used for Playwright component testing angular or unit testing other JavaScript Apps. Especially, if you aim to test components, which have complex interactions with other UI parts or if you need to verify interactions of the component within the DOM.

These topics might be interesting for you:

Playwright Component Testing as Modern Alternative to Traditional Tools

Cypress Component Testing and its Implementation (React Example)

As for Jest, it is a better choice for isolated unit tests. With all the necessary features to write effective unit tests for Angular components, Jest has a focus on isolation, mocking, and speed, and helps developers test the logic of the components reliably.

Setup Jest in an Angular project

Prerequisites

To create unit tests for Angular applications, you should have a basic understanding of the following concepts:

• Angular fundamentals
• JavaScript
• HTML
• CSS
• Angular CLI

From the very start, check the version of existing Node.js and Angular installations on your system using the following commands:

node --version

ng version //to check Angular version

Dependencies Configuration

Also, you need to install Jest with Angular dependency with the following command:

npm install --save-dev jest jest-preset-angular @types/jest

You can check are some missed dependencies in your Jest configuration or all is okay with command:

npx ng test --show -config -print

Next, you should create a jest.config.ts file, fill it with the Angular preset, and point. Be sure, that it contains the right settings inside:

import type { Config } from 'jest';

const config: Config = {
  preset: 'jest-preset-angular',
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.html$',
    },
  },
  transform: {
    '^.+\\.(ts|js|mjs|html)$': 'jest-preset-angular',
  },
  moduleFileExtensions: ['ts', 'js', 'html', 'json', 'mjs'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  transformIgnorePatterns: ['node_modules/(?!@angular|rxjs)'],
};

export default config;

This check might be critical for our test project because, in the next try to execute tests, I found Jasmine’s settings and changed them by Jest instead similarly in an older project Karma was represented.

Pay attention setupFilesAfterEnv we can configure it differently. One of the options is to write down it in the package.json file:

"jest": {
  "preset": "jest-preset-angular",
  "setupFilesAfterEnv": ["<rootDir>/src/setup-jest.ts"],
  "transform": {
    "^.+\\.(ts|js|html)$": "jest-preset-angular"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!@angular|rxjs)"
  ],
  "moduleFileExtensions": ["ts", "js", "html"],
  "testEnvironment": "jsdom"
}

The @types/jest package provides type declaration files for Jest and allows TypeScript to perform type checking and support for Jest-specific APIs, functions, and matches. To run Angular unit tests with Jest, you need the jest-preset-angular package with the following features:

•  the ts-jest library included in @types/jest speeds up integration between TypeScript and Jest as well as allows Jest to compile in-memory TypeScript code.
• @types/jest provides specialized serializers for Angular components in Angular component testing to improve snapshot testing capabilities by enabling easy comparison and validation of component snapshots.
• AST transformers in @types/jest modify Angular component code during testing, removing CSS styles and inlining HTML templates to guarantee compatibility with JSDOM without the need to rely on external resources.

Eventually, you can not paste settings in the package.json, as in another way you can make setupFilesAfterEnv configuration with setup-jest.ts file:

counter-testing/
│── src/
│   ├── setup-jest.ts  <-- ✅ Create this file
│   ├── app/
│   ├── assets/
│   ├── environments/
│── jest.config.ts
│── package.json
│── tsconfig.spec.json

The setup-jest.ts file provides:

import 'jest-preset-angular/setup-jest';

The next step is the declaration tsconfig.spec.json file using the command below: 

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest", "node"]
  },
  "files": ["src/setup-jest.ts"]
}

This command initializes Jest in your project and creates a jest.config.js file:

npx ts-jest config:init

Example of jest.config.ts for Angular testing project to provide a guided setup process:

import type { Config } from 'jest';

const config: Config = {
  preset: 'jest-preset-angular',
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.html$',
    },
  },
  transform: {
    '^.+\\.(ts|js|mjs|html)$': 'jest-preset-angular',
  },
  moduleFileExtensions: ['ts', 'js', 'html', 'json', 'mjs'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  transformIgnorePatterns: ['node_modules/(?!@angular|rxjs)'],
};

export default config;

Make sure tsconfig.spec.json includes:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "emitDecoratorMetadata": true
  }
}

Achoo, as you can see the configuration of Jest in the Angular project is quite routine

Use these tutorials, they help you much:

• Angular Testing: Past, Present, and Future by Rainer Hahnekamp
• TDD — Unit Testing TypeScript project with Jest by Ivan Dimitrijevic
• How to configure Jest with TypeScript by Jelena Durovic

Create your first component test with Jest

Before writing unit tests, you need to reduce the scope of tests and test the smallest possible code units to minimize finding bugs and prevent code breaking in the future. You can use the following functions:

• describe the function to group tests
• it function to define a test
• expect a function to make assertions

The entity where we implement Jest Angular component unit testing is the name.component.spec.ts and obviously our runner looking for the file in such format. Here are a few examples of the first test in Jest(test suite) for a simple Angular counter App:

Run & Report your tests

To run your Jest tests, you need to use the ng test command to see the test results in the console.

npx ng test

The results include information about executed tests, their status (passed/failed), test run summary, and error messages for failed tests. Also, you can use the ng test – coverage command to generate coverage reports. It will be HTML reports that you can open in your browser and find coverage details.

If you like, to receive more informative Reports for your automation we recommend the testomat.io test management solution. At first, make import:

After running your Angular test framework you can see such report which includes your manual efforts in one place. Many QA teams are looking for this capability in test management.

Challenges during testing and best practices to solve them

When teams work on Angular-based projects and test them, they face some most common challenges like the following:

• They write tests with too complex logic or even mix UI logic with business logic, which makes it too hard to isolate and conduct QA testing. That’s why it is important to write tests with clear logic and divide large components into smaller and manageable parts.
• It is difficult to test components with complex interactions. So, you should break test components into smaller ones and run them independently of one another to provide more accurate results of Angular component testing.
• There are flaky tests, which periodically can pass or fail, and brittle tests, which can break in terms of tiny test code changes. To solve issues in terms of brittle tests, you need to mock only external dependencies while trying to isolate flaky tests to define and fix the root cause.
• They may use outdated documentation that increases misunderstanding about the code being tested. With that in mind, teams should maintain the documentation and add clear comments to the source code so that every team member involved is on the same page.

In addition to that, there can be refactoring challenges, test setup issues, debugging complex test failures, problems with test integration in CI\CD pipelines, lack of code reviews, etc.

Bottom Line: What about Angular Component Testing with Jest Framework?

By testing the smallest Angular components – basic building blocks, teams can increase efficiency in the QA process. They can modularize code, improve maintainability, and promote reusability,  simplifying the scalable and dynamic Angular application development.

Don’t hesitate to drop us a line if you are interested in Angular component testing with Jest or have any related questions.

The post Angular component Testing with Jest (examples inside) 👀 appeared first on testomat.io.

Did you know that JavaScript has been named the most commonly used programming language for 8 years in a row? 67.7% of the developers use JavaScript

Discover Open Base link, there placed 201 best JavaScript testing frameworks and libraries for debugging. All these libraries and frameworks offer pre-written code and extra features.

Why do QA Automation Engineers tend to use ready code?

JavaScript libraries contain various code, functions, methods, objects to perform practical tasks, that QA Automation Engineers can reuse and re-purpose, instead of writing code from zero.

Contain wide-ranging out-the-box functionalities for launching the test environment. Let’s say CI/CD. If it is UI testing some frameworks establish a connection with the browser, for instance, the well-known Selenium Webdriver. Provide integration with other third party tools.  Give fake data, mocking support and many more…

Thus, JavaScript testing frameworks, bring simplicity to the entire testing process. Every JavaScript testing framework makes automation testing easier and speeds up the testing process. It saves a lot of time, effort and money for stakeholders. Moreover, these are the motive behind creating JavaScript testing frameworks and libraries, which is why you can find dozens of them for various use cases. Of course, even the best JavaScript testing framework has its own set of pros and cons.

The choice of a particular tool depends on the unique requirements of the project. Determines by the tech stack. Project progress in test automation, percentage of Automation Test Coverage has to be achieved by automated testing in comparison to manual testing. What problems might it solve? QA team testing experience. Dev skills and their previous experience.

To use a particular JavaScript framework, should read the JS framework’s documentation you intend to use and follow the steps from testing framework Docs. Rest assured that in Docs, you will find many good ready-to-use examples of tests to deal with daily routines.

Also, we would like to pay your attention to Chai. Make sure, you will apply it too. Chai is the assertion library and is used together with almost all javascript testing frameworks, which are noted below. As we know assertions are the base component of test cases. Chai provides functions and methods that ensure compare the output of a certain test with its expected value.

Chai is popular JavaScript testing library due to its simple BDD syntax. Its syntax is very similar to human language like English and makes tests more understandable for all participants of the testing process.

A list of JavaScript testing frameworks you should know by default

Mocha

MochaJS is certainly the most used JavaScript testing framework. Provides both frontend and backend testing.

Main advantages:

• Incredible expandability of Mocha. Mocha is powered by a lot of plugins for every taste, including real time reporting, screenshots and video capturing test results.
• Integrated with other JS testing frameworks, for example Webdriver.io, CodeceptJS.
• The best for starting, thank to there are many code documents, articles video tutorials on the internet.
• Sequential execution of test cases with flexible reporting.
• Mocha helps you to easily map exceptions with the relevant test cases
• Mocha support all browsers.
• It can easily support generators.

If you are looking for a very flexible and extensible testing tool, MochaJS will be an excellent choice!

CodeceptJS

What is CodeceptJS? CodeceptJS itself is not so much a testing tool rather than it is a wrap-around multiple testing tool able to test any web application. This means that with CodeceptJS you can pick between frameworks like WebDriverIO, Protactor, Nightmare, Appium Selenium, Appium, Playwright, Puppeteer and use the same script to test on all of those. You can even test your API with and integrate this with your end to end tests.

Main advantages:

• Multiple testing tools in one.
• CodeceptJS offers scenario-driven tests. These test scenarios are linear as the user’s behavior and his actions on a site.
• Special BDD-style syntax makes test code concise and readable.
• Expandable you can run tests without substantial changes in any of the popular test runners.
• Codecept testing environment is easy to set up and maintain.

Pretty good choice for small and middle projects

Cucumber

It is a cross-platform Behavior Driven Development (BDD) tool. Remember, Cucumber is not a testing tool as well as CodeceptJS. It is just a tool for describing users’ behavior, tending to how an app should work. It explains through Steps written in Gherkin syntax. It doesn’t require you, to automate user behavior verification of your system if you find it useful.

Main advantages:

• Cucumber tests are completely understandable for the business stakeholders, who are not familiar with testing at all, as they can easily read the code. Test reports are written in business readable English as well.
• Cucumber is quick and easy to set up execution and allows reusing code in the tests.
• One good feature is that both specification and test documentation are uploaded in a single up-to-date document.
• The code can be used together with other testing frameworks written not only on JavaScript but also on Java, Python and others.

Selenium WebDriver

Selenium Web Driver includes a JavaScript testing framework and is accepted for performing automated cross-browser testing web applications. Also, Selenium Web Driver is used for other programming languages. Support coding in Java, Python, PHP, etc.

Main advantages:

• Simple syntax thus can be easily learned by testers who want to get introduced to automated web testing quickly.
• Flexibility and extensibility.
• Scalability, performing parallel testing.
• A large community are always there to resolve your problem. Because Selenium Web Driver is the oldest automation testing tool.

TestCafe

TestCafe is a great alternative to Selenium-based tools. The library uses its own test structure and another way to implement control over the browser – the implementation of JavaScript scripts. You gain complete control over the JavaScript execution cycle. UI tests usually are run separately from others.

Main advantages:

• Easy to start testing.
• Clear and more readable syntax in comparison with Selenium Web Driver.
• Works in any browser and on any device.
• Parallel testing in several browsers at once.
• Convenient error reports.

Webdriver.io

WebdriverIO is a browser and mobile automation test framework based on Node.js and leverages Selenium.

WebdriverIO allows you to automate any application written with modern web frameworks such as React, Angular, Vue.js as well as native mobile applications for Android and iOS according to documentation.

Main advantages:

• WebdriverIO gives you a full-fledged framework out of the box. It doesn’t require you to implement anything from scratch, as you would with straight Selenium.
• It comes with everything you need to build scalable and sustainable test suites and contains extra features not found in the straight Selenium version.
• Out-of-the-box integrated with other JS testing frameworks, as for example Mocha, Chai, CI\CD tools, Reporters.

Cypress

Cypress is a JavaScript end-to-end testing framework that runs in the browser. Cypress definitely belongs to the top javascript testing frameworks thanks to their huge popularity.

Due to architectural design differences from other test frameworks, it provides customers with faster and more accurate test execution. It includes Test Runner and logs for interactive test execution, making it easy to debug test execution.

In addition, Cypress is intelligent enough to recognize that after saving a test file, the tester will rerun it. As a result, there is no need to define implicit and explicit waits.

Main advantages:

• Complete and clear documentation.
• Parallel and cross-browser testing.
• Convenient startup and debugging tools.
• Faster and more accurate running tests.

Jest

Jest is a great JS testing framework from Facebook. Jest is a framework for Unit Testing, a way for you to test the individual functions and components of your application, that future commits don’t break it unexpected.

Main advantages:

• Fast and highly productive. So, it is perfect for React-based applications, especially for large projects.
• Jest compatible with Babel-based projects, TypeScript, Angular, VueJS and other frontend frameworks, also many NodeJS test libraries.
• Everything you need for unit testing comes out of the box.
• Jest has excellent documentation, active worldwide community and support for all modern IDEs.
• An intelligent parallel testing mechanism.
• Working in monitoring mode, jest updates only those tests that could change. That makes Jest a popular JavaScript automation testing framework for unit tests.

Puppeteer

Puppeteer automates Chrome and Firefox. Mostly Puppeteer is an automation tool and not a testing framework. This means it is incredibly popular for use cases such as scraping, generating PDFs, etc. Puppeteer is a test automation tool maintained by Google. It uses the same debugger protocol Selenium (well, ChromeDriver) uses to perform clicks.

Main advantages:

• Puppeteer is generally easier to set up than Selenium for the development flow.
• Easy to set up and maintain
• Exellent documentation

Playwright

Playwright is a Node.js library that allows the QA Automation Engineers to control browsers through its high-level API. Playwright utilizes the same architecture as Puppeteer and is a thin WebSocket client. It uses a very similar syntax.

When the tester runs a Playwright test script, the UI is readied at the backend before the test interacts with web elements. While for other frameworks, testers have to write code for the wait explicitly.

Playwright ensures auto wait, making it easier to write concise test scripts. It also provides flexible testing through its capabilities, which covers a wide range of complex scenarios for comprehensive testing.

Playwright is a test automation tool maintained by Microsoft.

Main advantages:

• The Playwright is highly fast and stable and ensures optimal usage of resources
• Parallel testing launches through Browser Context
• Available Safari browser support.
• It works on isolated sessions in browsers for grids.
• Test creation speed is high as well.
• Like Cucumber, Playwright supports multiple programming languages such as Python, Java, and .NET C#
• Simple to install and set up
• Also, available community support, great documentation, detailed instructions, good example projects.

In conclusion

Find the right JavaScript testing framework you need Make your JavaScript tests visible with testomat.io — all-in-one test management solution for automated tests.

The post JS Testing Frameworks <br> you must know appeared first on testomat.io.