The module from QUnit will scope your tests into groups of tests which can be configured and run independently.
Make sure to call the setupRenderingTest function together with the hooks parameter first in your new module.
This will do the necessary setup for testing your component for you,
including setting up a way to access the rendered DOM of your component later on in the test,
and cleaning up once your tests in this module are finished.

Also note how the callback function passed to the test helper is marked with the keyword async.
The ECMAScript 2017 feature async/await allows us to write asynchronous code in an easy-to-read,
seemingly synchronous manner.
We can better see what this means, once we start writing out our first test case:

Each test can use the render() function imported from the @ember/test-helpers package to create a new instance of the component by declaring the component in template syntax,
as we would in our application.
Also notice, the keyword await in front of the call to render.
It allows the test which we marked as async earlier to wait for any asynchronous behavior to complete before executing the rest of the code below.
In this case our first assertion will correctly execute after the component has fully rendered.

Next we can test that changing the component's name property updates the
component's style attribute and is reflected in the rendered HTML:

Here's an example test that asserts that the specified externalAction function is invoked when the component's internal submitComment action is triggered by making use of a test double (dummy function).
assert.expect(1) at the top of the test makes sure that the assertion inside the
external action is called:

Stubbing Services

In cases where components have dependencies on Ember services,
it is possible to stub these dependencies for rendering tests.
You stub Ember services by using the built-in register() function to register your stub service in place of the default.

Imagine you have the following component that uses a location service to display the city and country of your current location:

You can follow along by generating your own component with ember generate
component location-indicator.

To stub the location service in your test, create a local stub object that extends Ember.Service,
and register the stub as the service your tests need in the beforeEach function.
In this case we initially force location to "New York".

Waiting on Asynchronous Behavior

Often, interacting with a component will cause asynchronous behavior to occur, such as HTTP requests, or timers.
The module @ember/test-helpers provides you with several useful helpers that will allow you to wait for any asynchronous behavior to complete that is triggered by a DOM interaction induced by those.
To use them in your tests, you can await any of them to make sure that subsequent assertions are executed once the asynchronous behavior has fully settled:

await click('button.submit-button'); // clicks a button and waits for any async behavior initiated by the click to settle
assert.equal(this.element.querySelector('.form-message').textContent, 'Your details have been submitted successfully.');

Nearly all of the helpers for DOM interaction from @ember/test-helpers return a call to settled - a function
that ensures that any Promises, operations in Ember's run loop, timers or Ajax requests have already resolved.
The settled function itself returns a Promise that resolves once all async operations have come to an end.

You can use settled as a helper in your tests directly and await it for all async behavior to settle deliberately.

Imagine you have a typeahead component that uses Ember.run.debounce to limit requests to the server, and you want to verify that results are displayed after typing a character.

You can follow along by generating your own component with ember generate
component delayed-typeahead.