In this test, we are focusing on validating the fact that a mocked list of drivers is correctly linked (bound) to the table child component. As a reminder, you will recall that this is actually achieved mostly through HTML code and some annotations in the JavaScript controller, as shown:

Here's a fragment from the raceSetup.html file:

<lightning-datatable 
   key-field="RecordId"
   data={drivers.data} 
   columns={columns}>
</lightning-datatable> 

Here's a fragment from the raceSetup.js file:

import getDriverList from
   '@salesforce/apex/RaceSetupComponentController.getDriverList';

...

@wire(getDriverList)
drivers;

This might seem like a basic thing to write test code for, given that this component is quite simple, but imagine if you had more bindings and, thus, greater potential for the binding references and/or imports in the controller code to fall out of sync.

In order to write a unit test for the preceding, we need to use DI APIs to inject an alternative code path to actually go to the server and instead respond with a sample set of data. The first step is to define the sample (or mock data) and then inject it. The getDriversList.json file is stored in the data folder within the __test__ folder and looks like this:

[
    {
        "RecordId": "a015800000AmuwHAAR",
        "Name": "Lewis Hamilton",
        "Selected": false
    },
    {
        "RecordId": "a015800000AmuwMAAR",
        "Name": "Jenson Button",
        "Selected": false
    },
    {
        "RecordId": "a015800000AmuwRAAR",
        "Name": "Sergio Pérez",
        "Selected": false
    }
]

The preceding JSON must match the output from the Apex Controller method, RaceSetupComponentController.getDriverList. The JSON data reflects the structure of the RaceSetupComponentController.DriverSelection inner class.

When the Lightning framework observes the @wire annotation on the drivers property, it looks to see whether a response from the server has been injected by the test code. The following highlights the key steps to injecting a mock response from an Apex Controller:

// Step 1: the Apex Controller method is imported to the test code
import getDriverList from
   '@salesforce/apex/RaceSetupComponentController.getDriverList';

// Step 2: The sample data is read into the test code
const mockGetDriverList = require('./data/getDriverList.json');

// Step 3: The Salesforce registerApexTestWireAdapter method is
//   used to get a reference to a mock LWC write adapter
const getDriverListAdapter =
   registerApexTestWireAdapter(getDriverList);

// Step 4: Test code emits the mock response (emulating the server)
getDriverListAdapter.emit(mockGetDriverList);

Steps 1, 2, and 3 are defined outside of the specific test at the top of the test file. Step 4 is executed at the appropriate point in the test code itself. The following code shows the full test code and uses the Salesforce-provided createElement method (imported at the top of the test file) to create an instance of the component to test. This is appended into a test instance of the page managed by the Jest framework:

// Test: displays drivers
it('displays drivers', () => {

    // Given
    const element = createElement('c-raceSetup', {
        is: RaceSetup
    });

    // Then
    document.body.appendChild(element);
    getDriverListAdapter.emit(mockGetDriverList);

    // When 
    return Promise.resolve().then(() => {
        const tableEl =
           element.shadowRoot.querySelector('lightning-datatable');
        expect(tableEl.data.length).toBe(mockGetDriverList.length);
        });
});

The industry standard querySelector method is used to obtain a reference to the mocked lightning-datatable instance, which is automatically set up for you. Finally, the expect method (provided by Jest at https://jestjs.io/docs/en/expect#expectvalue) is used to ensure that the number of records defined in the mock data shown above matches the number of table items as a result of the binding being tested. Notice that you did not have to mock the lightning-datatable component; this is handled for you by Salesforce.