Testing jQuery Plugins

Testing Plugins

Use QUnit (jQuery's own test framework) to unit test plugins. Test initialization, options, methods, events, and cleanup.

Example

QUnit.test("myPlugin initializes correctly", function(assert) {
  const $el = $("<div>").appendTo("#qunit-fixture");
  $el.myPlugin({ color: "red" });

  assert.ok($el.data("myPlugin"), "Instance stored in data");
  assert.equal($el.css("color"), "rgb(255, 0, 0)", "Color applied");
});

QUnit.test("myPlugin destroy cleans up", function(assert) {
  const $el = $("<div>").myPlugin();
  $el.myPlugin("destroy");

  assert.notOk($el.data("myPlugin"), "Instance removed");
});

JAVASCRIPT

Full Editor

Pro Tip

Use #qunit-fixture for DOM tests — QUnit resets it between tests automatically.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned