How to clear the DOM with multiple tests in single ember integration test file

I have two tests in date-dropdown-test.js:

moduleForComponent('forms/date-dropdown', 'Integration | Component | forms/date dropdown', {
  integration: true
});

test('it renders in month mode', function(assert) {
  assert.expect(2);

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

  this.render(hbs`{{forms/date-dropdown dateFormat='MMMM YYYY' daySpecific=false dayToUse=26 dateUnitsLong=24 startIncrement=1}}`);

  // Check 24 months appear
  assert.equal(this.$('option').length, 24);

  // Check next month is selected by default
  var today = new Date();
  today.setDate(1);
  today.setMonth(today.getMonth() + 1);
  today.setDate(26);
  var expected = moment(today).format('DD-MM-YYYY');

  assert.equal(this.$('select').val(), expected);

});

test('it renders in day mode', function(assert) {
  assert.expect(1);

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

  this.render(hbs`{{forms/date-dropdown dateFormat='MMMM YYYY' daySpecific=true dateUnitsLong=300 startIncrement=3}}`);

  // Check 300 days appear
  assert.equal(this.$('option').length, 300);

});

The problem I have is when the second test runs the component from the first test is still in the DOM and found by this.$('option').length. What is the correct way to clear the DOM between or at the end of tests in Ember testing?

Or is there something more specific than this.$() to use in the context of the component rendered in the test?