title: How would I unit test this simple jQuery code with karma/jasmine?
body: <p>I'm working on creating a webpack starter app for to support lightweight Typescript and jQuery development. So far it's working out well, doing all the cool stuff I want it to do like automatically detecting edits, rebuilding and relaunching the app when you change things, etc. It supports unit and e2e testing as well.</p>
  
  <p>But I've never unit tested jQuery code, and I don't even know where to begin to test this dead-simple "Hello, world!" app:</p>
  
  <pre><code>import * as $ from 'jquery';
  
  export interface SampleInterface {
    stuff: string;
  }
  
  $('#message').text('Hello, world!');
  </code></pre>
  
  <p>What would a unit test that ensures that this message has been set look like?</p>
  
  <p>I've installed <code>karma-jquery</code> and <code>karma-jasmine-jquery</code>. I've googled a lot looking for examples of how to use these tools, but none of what I've seen matches the simple problem I'm trying to solve.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I think I'm getting closer to what I want to do with the following test that doesn't quite work:</p>
  
  <pre><code>describe('main', () =&gt; {
    it('should say hello', () =&gt; {
      spyOn(jQuery.prototype, 'text').and.callThrough();
      require('./main');
      expect(jQuery.prototype.text).toHaveBeenCalledWith('Hello, world!');
    });
  });
  </code></pre>
  
  <p>It doesn't surprise me that this doesn't work, because this spies on a jQuery prototype method, whereas what I think I need to be spying on is a particular jQuery object, but how to create that and spy on it so that it works with the selector <code>#message</code>, I haven't got a clue yet.</p>