{"id":15655,"library":"jasmine-jquery","title":"Jasmine jQuery Matchers and Fixture Loader","description":"jasmine-jquery is a testing utility that extends the Jasmine JavaScript Testing Framework with custom matchers specifically designed for jQuery elements and an an API for managing HTML, CSS, and JSON fixtures. It facilitates the testing of DOM interactions and external data loading in front-end applications, providing a convenient way to assert jQuery object states and manipulate test environments. The current stable version, 2.1.1, was released in May 2015. The project appears to be largely unmaintained since 2017, meaning there is no active release cadence, and it primarily targets older testing setups that rely on global script inclusions and jQuery. Its key differentiators include a comprehensive set of jQuery-specific matchers like `toBeVisible`, `toHaveAttr`, and `toContainElement`, as well as a convenient fixture loading mechanism that simplifies isolated component testing by providing `loadFixtures`, `setFixtures`, and `clearFixtures` globals.","status":"abandoned","version":"2.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/velesin/jasmine-jquery","tags":["javascript","jasmine","jquery"],"install":[{"cmd":"npm install jasmine-jquery","lang":"bash","label":"npm"},{"cmd":"yarn add jasmine-jquery","lang":"bash","label":"yarn"},{"cmd":"pnpm add jasmine-jquery","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"jasmine-jquery provides matchers and utilities that operate directly on jQuery objects and relies on the global jQuery object.","package":"jquery","optional":false},{"reason":"This package is an extension for the Jasmine testing framework, adding custom matchers and utilities to its global context.","package":"jasmine-core","optional":false}],"imports":[{"note":"Matchers like `toBeInDOM` are automatically added to Jasmine's global `expect` object upon loading the jasmine-jquery script via a `<script>` tag. No direct `import` or `require` is needed or supported for individual matchers.","wrong":"import { toBeInDOM } from 'jasmine-jquery'","symbol":"toBeInDOM","correct":"expect($('<div/>')[0]).toBeInDOM()"},{"note":"Fixture functions like `setFixtures` and `loadFixtures` are exposed as global functions after the `jasmine-jquery.js` script is loaded into the HTML test runner. These functions are not available via standard module imports.","wrong":"const setFixtures = require('jasmine-jquery').setFixtures;","symbol":"setFixtures","correct":"setFixtures('<div id=\"test-elem\"></div>')"},{"note":"Similar to `setFixtures`, `readFixtures` is a globally available function for reading fixture content. It expects the fixture file to be accessible via the configured `fixturesPath`.","wrong":"import { readFixtures } from 'jasmine-jquery'","symbol":"readFixtures","correct":"const content = readFixtures('my-template.html')"}],"quickstart":{"code":"/*\n  To run this, you'd typically include jasmine-jquery.js in an HTML test runner\n  after jQuery and Jasmine are loaded globally. Example HTML setup:\n\n  <script src=\"path/to/jquery.js\"></script>\n  <script src=\"path/to/jasmine.js\"></script>\n  <script src=\"path/to/jasmine-html.js\"></script>\n  <script src=\"path/to/boot.js\"></script>\n  <script src=\"path/to/jasmine-jquery.js\"></script>\n  <script src=\"path/to/your-spec.js\"></script>\n\n  And a fixture file: spec/javascripts/fixtures/myFixture.html\n  ---\n  <div id=\"test-container\" class=\"active data-attr\" data-info=\"example\">\n    <input type=\"checkbox\" id=\"myCheckbox\" checked />\n    <button id=\"myButton\">Click Me</button>\n    <p>Some important text here.</p>\n  </div>\n*/\n\ndescribe(\"Jasmine-jQuery Matchers and Fixtures Integration\", function() {\n  beforeEach(function() {\n    // Configure the path to your fixtures (e.g., 'spec/javascripts/fixtures/')\n    // jasmine.getFixtures().fixturesPath = 'base/spec/javascripts/fixtures';\n\n    // Load a fixture from a file into the DOM\n    loadFixtures('myFixture.html');\n  });\n\n  afterEach(function() {\n    // jasmine-jquery automatically removes fixtures after each spec, \n    // but clearFixtures() can be called explicitly if needed.\n    // clearFixtures();\n  });\n\n  it(\"should load the fixture and allow attribute checks\", function() {\n    const $container = $('#test-container');\n    expect($container).toExist();\n    expect($container).toHaveAttr('class', 'active data-attr');\n    expect($container).toHaveAttr('data-info', 'example');\n    expect($container).not.toHaveAttr('id', 'wrong-id');\n  });\n\n  it(\"should correctly check the state of a checkbox\", function() {\n    const $checkbox = $('#myCheckbox');\n    expect($checkbox).toBeChecked();\n    $checkbox.prop('checked', false);\n    expect($checkbox).not.toBeChecked();\n  });\n\n  it(\"should verify element visibility and text content\", function() {\n    const $button = $('#myButton');\n    expect($button).toBeVisible();\n    $button.hide();\n    expect($button).toBeHidden();\n\n    const $paragraph = $('#test-container p');\n    expect($paragraph).toContainText('important text');\n    expect($paragraph).not.toContainText('unrelated');\n  });\n\n  it(\"should verify contained elements using selectors\", function() {\n    const $container = $('#test-container');\n    expect($container).toContainElement('input#myCheckbox');\n    expect($container).toContainElement('button');\n    expect($container).not.toContainElement('span');\n  });\n});","lang":"javascript","description":"This quickstart demonstrates how to set up `jasmine-jquery` within a Jasmine test suite. It shows how to load HTML content using `loadFixtures` (assuming a configured `fixturesPath`) and then apply various custom jQuery matchers like `toExist`, `toHaveAttr`, `toBeChecked`, `toBeVisible`, `toBeHidden`, `toContainText`, and `toContainElement` to assert properties and states of DOM elements."},"warnings":[{"fix":"For module-based projects, consider alternative DOM testing utilities like `@testing-library/jest-dom` or integrate `jasmine-jquery` through global script loading in a test HTML runner or a shimming setup. Ensure `jQuery` and `jasmine` are loaded globally *before* `jasmine-jquery.js`.","message":"`jasmine-jquery` is designed for older testing environments where scripts are loaded globally (e.g., via `<script>` tags) and assumes the presence of global `jQuery` and `jasmine` objects. It does not support modern JavaScript module systems (ESM or CommonJS) for direct `import` or `require` of its features. Attempting to use it in a module-based environment without proper shimming or global exposure will lead to `ReferenceError` or features not being available.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure `jQuery` is exposed globally (e.g., `window.jQuery = require('jquery')` or by loading jQuery via a `<script>` tag before `jasmine-jquery`). If using a module bundler, explicitly expose `jQuery` to the `window` object before `jasmine-jquery` is processed.","message":"This library relies heavily on a global `jQuery` object. If `jQuery` is not loaded into the global scope (e.g., loaded via a module bundler in a private scope), `jasmine-jquery` will fail to initialize or its matchers will not function correctly, often manifesting as `TypeError: Cannot read properties of undefined (reading 'fn')`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For new projects or migrations, consider modern DOM testing libraries that align with current front-end development practices. For existing projects, be aware of the lack of updates and potential compatibility issues with newer jQuery or Jasmine versions.","message":"The project appears to be unmaintained since 2017, and its development patterns (reliance on globals, Bower for package management) are largely superseded by modern JavaScript ecosystems. Users are encouraged to evaluate more actively maintained alternatives for DOM testing (e.g., `@testing-library/jest-dom` for Jest, or custom matchers for other frameworks) that integrate better with module systems and offer more robust features for modern web development.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `jasmine-jquery.js` is loaded into the global scope via a `<script>` tag in your test runner HTML, or via a pre-processor in your test setup, *before* your test files run. Also, verify `jQuery` and `Jasmine` itself are loaded globally beforehand.","cause":"The `jasmine-jquery` script was not loaded into the global scope, or was loaded after your test specs began executing, or `jasmine-core` was not loaded first.","error":"ReferenceError: setFixtures is not defined"},{"fix":"Double-check the loading order: `jQuery` -> `Jasmine` -> `jasmine-jquery.js`. Ensure there are no JavaScript errors during the loading of `jasmine-jquery.js` that might prevent it from registering its matchers.","cause":"The custom matchers provided by `jasmine-jquery` have not been successfully registered with Jasmine's `expect` object. This typically happens if `jasmine-jquery.js` failed to load or initialize correctly.","error":"expect(...).toBeInDOM is not a function"},{"fix":"Make certain that `jQuery` is loaded and accessible globally *before* `jasmine-jquery.js` is loaded. If using a module bundler, ensure `jQuery` is explicitly exposed to the global `window` object.","cause":"`jQuery` was not available in the global scope (i.e., `window.jQuery` was undefined) when `jasmine-jquery` attempted to initialize and extend jQuery's functionality.","error":"TypeError: Cannot read properties of undefined (reading 'fn') at jasmine-jquery.js"},{"fix":"Verify that `jasmine.getFixtures().fixturesPath` is correctly configured in your test setup to point to the directory containing your fixture files. Ensure the fixture file name and extension are correct and that the file is actually present and accessible at that path.","cause":"The fixture file specified (e.g., `myFixture.html`) could not be found at the expected path, or the fixture path configuration (`jasmine.getFixtures().fixturesPath`) is incorrect or not set.","error":"Error: Fixture could not be loaded: myFixture.html"}],"ecosystem":"npm"}