AngularJS：如何在Karma-Jasmine测试环境中引入Bootstrap

Got it, let's work through this problem step by step! The root cause here is clear—your Karma-Jasmine test environment isn't loading Bootstrap's JavaScript, so the functions your AngularJS directive depends on aren't available. Here are a few reliable solutions to fix this:

Method 1: Load Bootstrap JS Directly in Karma Configuration #

This is the most straightforward approach if you need the actual Bootstrap functionality in your tests.

• First, make sure Bootstrap (and its dependency, jQuery) are installed in your project (via npm/yarn or as local files).
• Open your karma.conf.js file, locate the files array, and add the paths to jQuery, Bootstrap JS, and your other dependencies in the correct order (jQuery must come before Bootstrap, since Bootstrap JS relies on it):

files: [
  // jQuery (required for Bootstrap JS)
  'node_modules/jquery/dist/jquery.min.js',
  // AngularJS core
  'node_modules/angular/angular.min.js',
  // Angular mocks for testing utilities
  'node_modules/angular-mocks/angular-mocks.js',
  // Bootstrap JavaScript
  'node_modules/bootstrap/dist/js/bootstrap.min.js',
  // Your app's source files (including the directive)
  'src/**/*.js',
  // Your test spec files
  'test/**/*.spec.js'
]

• Pro tip: If your directive only uses specific Bootstrap components (like modals or dropdowns), you can load just the individual component JS files instead of the full bootstrap.min.js to keep tests lightweight.

Method 2: Mock Bootstrap Functions (For Isolated Tests) #

If you don't need to test the actual Bootstrap UI behavior—just want to verify your directive correctly calls Bootstrap methods—mocking is a great option. It keeps tests fast and avoids relying on external library implementations.

For example, if your directive calls $().modal():

beforeEach(function() {
  // Mock jQuery's modal method before loading your app module
  spyOn($.fn, 'modal').and.callFake(function() {
    // Return `this` to maintain chainability if your code expects it
    return this;
  });

  // Load your AngularJS module
  module('yourAppModuleName');
});

// Example test to verify the method was called
it('should trigger the Bootstrap modal when the directive is activated', function() {
  // Trigger the action that triggers your directive's Bootstrap call
  // ... (e.g., compile the directive template, simulate a click)
  
  // Verify the Bootstrap method was invoked
  expect($.fn.modal).toHaveBeenCalled();
});

Method 3: Check Version Compatibility #

Sometimes the issue stems from version mismatches between dependencies:

• Bootstrap 3.x requires jQuery 1.9.1 or newer
• Bootstrap 4.x requires jQuery 3.2.1 or newer
• Ensure your AngularJS version doesn't conflict with any Bootstrap-related packages (if you're using angular-bootstrap wrappers, double-check their compatibility docs)

After setting up one of these solutions, restart your Karma server and re-run the tests—the "function undefined" error should be gone!

内容的提问来源于stack exchange，提问作者HoangVu