How to use the ember-qunit.moduleForComponent function in ember-qunit

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('foo-bar', 'Integration | Component | foo bar', {
  integration: true
});


test(':selected is replaced correctly', function(assert) {
  // find
  const checkedVal = this.$('.foo input:selected').val();
  assert.equal(checkedVal, 13);

  // findAll
  const checkedCount = this.$('select option:selected').length;
  assert.equal(checkedCount, 3);

  // Multiple jQuery selectors
  const firstChecked = this.$('.foo input:selected:eq(0)').val();
  const secondChecked = this.$('.foo input:selected:eq(2)').val();

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('x-foo', 'Integration | Component | x-foo', {
  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

import { keyEvent } from '@ember/test-helpers';
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('foo-bar', 'Integration | Component | foo bar', {
  integration: true
});

test('it renders', async function(assert) {
  this.render(hbs`{{foo-bar}}`);

  await keyEvent('.foo', 'keydown', 13);
  assert.ok(true);
});

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('foo-bar', 'Integration | Component | foo bar', {
  integration: true
});

test('anonymous function callback with two args', function(assert) {
  this.render(hbs`{{foo-bar}}`);

  const elemIds = this.$('.button-class').each((i, val) => {
    assert.equal(element.id, `button${index}`);
  });
});

test('anonymous function callback with one arg', function(assert) {
  this.render(hbs`{{foo-bar}}`);

  const elemIds = this.$('.button-class').each((index) => {
    assert.equal(element.id, `button${index}`);

import { find } from '@ember/test-helpers';
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('foo-bar', 'Integration | Component | foo bar', {
  integration: true
});

test('it renders', function(assert) {
  this.render(hbs`{{foo-bar}}`);

  assert.equal(find('.foo').tagName, 'DIV');
});

import { moduleForComponent, test } from 'ember-qunit';
import { visit } from 'ember-native-dom-helpers';

moduleForComponent('visit', 'Integration | Test Helper | visit', {
  integration: true
});

test('It raises an error in integration', function(assert) {
  assert.throws(function() {
    visit('/somewhere');
  }, 'visit is only available during acceptance tests');
});

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('foo-bar', 'Integration | Component | foo bar', {
  integration: true
});

test('it renders', function(assert) {
  this.render(hbs`{{foo-bar}}`);

  this.$('.foo').change();
  this.$('.foo').submit();
  this.$('.foo').focusin();
  this.$('.foo').focusout();
  this.$('.foo').mousedown();
  this.$('.foo').mouseenter();
  this.$('.foo').mouseleave();
  this.$('.foo').mousemove();
  this.$('.foo').mouseout();
  this.$('.foo').mouseover();

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import ANY_SELECTOR_AS_IMPORTED_CONST from './constants';

const JQEXTENSION_SELECTOR_AS_LOCAL_CONST = '.foo:first';
const NORMAL_SELECTOR = '.foo';
const NORMAL_PSEUDO_SELECTOR = '.foo:eq(0)';

moduleForComponent('foo-bar', 'Integration | Component | foo bar', {
  integration: true
});

test('it renders', function(assert) {
  this.render(hbs`{{foo-bar}}`);

  assert.ok(this.$('.foo:even').length);
  assert.ok(this.$('.foo:odd').length);
  assert.ok(this.$('.foo:contains(foo)').length);
  assert.ok(this.$('.foo:has(p)').length);
  assert.ok(this.$('.foo:animated').length);
  assert.ok(this.$('.foo:checkbox').length);
  assert.ok(this.$('.foo:file').length);
  assert.ok(this.$('.foo:first').length);
  assert.ok(this.$('.foo:gt(2)').length);
  assert.ok(this.$('.foo:header').length);

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('foo-bar', 'Integration | Component | foo bar', {
  integration: true
});

test('it renders', function(assert) {
  this.render(hbs`{{foo-bar}}`);

  assert.equal(this.$('.foo').attr('id'), 'foo');
  assert.equal(this.$('.foo').attr('data-test'), 'foo');
});

findAll,
  findWithAssert,
  fillIn,
  focus,
  blur,
  triggerEvent,
  keyEvent,
  scrollTo,
  selectFiles,
  waitFor,
  waitUntil,
} from 'ember-native-dom-helpers';
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('foo-bar', 'Integration | Component | foo bar', {
  integration: true
});

test('it renders', async function(assert) {
  this.render(hbs`{{foo-bar}}`);

  await click('.foo', {});
  assert.equal(find('.foo').id, 'foo');
  await fillIn('.foo input', 'bar');
  await blur('.foo input');
  assert.equal(find('.foo').textContent.trim(), 'foo');
});

test('it renders again', function(assert) {
  this.render(hbs`{{foo-bar}}`);