How to load a component template in component integration tests - EmberJS

Here is a verbatim copy of an EmberCLI generated component test after this command:
ember generate component-test my-component

my-component-test

//tests/integration/components/my-component-test.js
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('my-component', 'Integration | Component | my-component', {
  integration: true
});

test('it renders', function(assert) {
  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });

  this.render(hbs``);

  assert.equal(this.$().text().trim(), '');

  // Template block usage:
  this.render(hbs`
    
      template block text
    
  `);

  assert.equal(this.$().text().trim(), 'template block text');
});

my-component has a template looking something like this:

<div class="foo">
    
       <span>item.name</span>
    
</div>

However, if I change the my-component-test to search for elements inside of the compiled component, I have no luck finding them.

this.set('myArr', [{name: 'John'}]);
this.render(hbs``);
this.$('.foo').length; // zero

Are templates not automatically looked-up and included? If so, how can I include my template without re-writing the whole thing?

Similar:
Integration test for component containing a component

Guide: http://ift.tt/2bOXnfb