Cypress AngularJS Unit Test Adapter

1.2.1 · abandoned · verified Sun Apr 19

This package enables unit testing of AngularJS (Angular 1.x) values, services, controllers, and components directly within the Cypress.io test runner. It allows developers to leverage Cypress's powerful features, such as DOM snapshots and time-travel debugging, for individual AngularJS units, providing a comprehensive debugging experience similar to end-to-end tests. The current stable version is 1.2.1, released in April 2018. Given the last release date and its 'BETA' designation in the README, the project appears unmaintained. Its primary differentiator was bringing Cypress's robust E2E testing environment to the unit testing of AngularJS applications. It's crucial to note that AngularJS itself reached End-of-Life (EOL) on December 31, 2021, meaning it no longer receives official updates or security patches, which significantly impacts the relevance and security of this package.

Common errors

```
Error: Cannot find module 'angular'
```
cause The `angular` peer dependency is missing from your project's `package.json` or not installed.

fix Install AngularJS as a project dependency: `npm install angular@^1.6.9 --save-dev`.
```
Cypress encountered an unexpected error: Cannot find module 'webpack-dev-server/client/index.js' from ...
```
cause This error or similar issues might arise due to incompatibility between very old Cypress versions and modern development server setups, or missing Webpack configurations required by older Cypress component testing setups.

fix Ensure your `cypress.json` and `cypress/plugins/index.js` are configured correctly if using an older Cypress. However, the core issue is likely the overall age and incompatibility with modern tooling. Consider alternatives for testing.
```
TypeError: (0 , cypress_angularjs_unit_test__WEBPACK_IMPORTED_MODULE_0__.mount) is not a function
```
cause You are likely using an incorrect import statement, attempting to import `mount` as a default export when it is a named export.

fix Change your import statement from `import mount from 'cypress-angularjs-unit-test'` to `import { mount } from 'cypress-angularjs-unit-test'` for ESM, or use `const { mount } = require('cypress-angularjs-unit-test')` for CommonJS.

Warnings

breaking AngularJS, the framework this package is designed for, reached its End-of-Life (EOL) on December 31, 2021. It no longer receives official updates, security patches, or bug fixes from Google. Continuing to use AngularJS, and by extension this testing utility, for production applications without extended third-party support introduces significant security and maintenance risks.
Fix: Consider migrating to a modern framework like Angular (2+) or React. If migration is not immediately feasible for legacy AngularJS applications, explore extended long-term support (LTS) options from providers like OpenLogic or HeroDevs for security patches and compatibility fixes.
breaking This package specifies `cypress: ^2.1.0` as a peer dependency, but Cypress has undergone numerous major versions and significant breaking changes since its release in 2018. It is highly unlikely to be compatible with modern Cypress versions (e.g., v10+).
Fix: Downgrade Cypress to a version compatible with `^2.1.0` (e.g., Cypress 3.x or lower if possible) or refrain from using this unmaintained package. Modern Cypress (v10+) offers built-in component testing features for frameworks like Angular, which would be the recommended approach for newer Angular applications.
gotcha The package README explicitly states its 'BETA' status, and it has not been updated since April 2018. This indicates it was never considered stable and is currently unmaintained, meaning there will be no new features, bug fixes, or compatibility updates for newer Node.js versions, Cypress, or even AngularJS itself (post-EOL).
Fix: Do not use this package for new projects. For existing legacy AngularJS applications, proceed with caution and be prepared to debug and potentially fork the package for any necessary fixes or adaptations.

Install

npm install cypress-angularjs-unit-test npm
yarn add cypress-angularjs-unit-test yarn
pnpm add cypress-angularjs-unit-test pnpm

Imports

mount

wrong:

import mount from 'cypress-angularjs-unit-test'

correct:

import { mount } from 'cypress-angularjs-unit-test'

The `mount` function is a named export, not a default export.

mount (CommonJS)

wrong:

const mount = require('cypress-angularjs-unit-test')

correct:

const { mount } = require('cypress-angularjs-unit-test')

For CommonJS, `mount` is a named property of the exported object.

angular
wrong:
```
import { angular } from 'angular'
```
correct:
```
import angular from 'angular'
```
AngularJS (version 1.x) is typically imported as a default export, or accessed globally as `window.angular`.

Quickstart

This example demonstrates how to define an AngularJS module and controller, then mount a component using `mount` in a Cypress test. It verifies the rendered content with Cypress commands.

import { mount } from 'cypress-angularjs-unit-test'
import angular from 'angular'

angular.module('demo', [])
  .controller('WelcomeController', function($scope) {
    $scope.greeting = 'Welcome!';
    $scope.version = angular.version.full
  });

beforeEach(() => {
  // Let's mount our "demo" module and its controller
  // in a "mini app" before each test
  const template = `
    <div ng-controller="WelcomeController">
      {{greeting}}
      ng {{version}}
    </div>
  `
  mount(template, ['demo'])
})

it('shows welcome message and Angular version', () => {
  // "WelcomeController" should have replaced template
  // expression {{greeting}} with actual text
  cy.contains('div', 'Welcome!').should('be.visible')
  cy.contains('div', `ng ${angular.version.full}`).should('be.visible')
  cy.screenshot('welcome-message');
})

view raw JSON →