Include: dependency injection CodeceptJS/Puppeteer - Missing something?

Question

I am clearly missing something related to dependency injection with CodeceptJS and Puppeteer. I am attempting to follow the docs but not yet successful.

Goal: Create a page object class, access the methods in that page object class from my test scenarios.

Simple test case

Feature('Common logon/logoff scenarios');

Scenario.only('Test drawer class', (I, loginAs, menu) => {
    I.amOnPage('/login');
    loginAs('admin');
    menu.dashboard();
});

Include section from my codeceptjs.config.js file

  include: {
    I: "./steps_file.js",
    menu: "./src/fragments/menu.js"
  },

Menu page object class (menu.js)

const { I } = inject();

module.exports = {

  // Navigation drawer locators
  item: {
    dashboard: 'a[href="#/"]',
    admin: 'li[id="resources.admin.name"]',
    permissions: 'a[href="#/user-claims"]',
    sites: 'a[href="#/site"]',
    reportTemplates: 'a[href="#/reporttemplates"]',
    stations: 'a[href="#/station"]',
    supervisor: 'li[id="resources.supervisor.name"]',
    people: 'a[href="#/people"]',
    supervisorPressPallets: 'a[href="#/presspalletbuilder"]',
    stationIdentify: 'a[href="#/stationadopt"]',
    operator: 'li[id="resources.operator.name"]',
    operatorPressPallets: 'a[href="resources.operator.name"]'
  },

  // Methods to access nav drawer menu items
  dashboard() {
    I.click(this.item.dashboard);
  },

  admin() {
    I.click(this.item.admin);
  },
  
  permissions() {
    I.click(this.item.permissions);
  },

  sites() {
    I.click(this.item.sites);
  },

  reportTemplates() {
    I.click(this.item.reportTemplates);
  },

  stations() {
    I.click(this.item.stations);
  },

  supervisor() {
    I.click(this.item.supervisor);
  },

  people() {
    I.click(this.item.people);
  },

  supervisorPressPallets() {
    I.click(this.item.supervisorPressPallets);
  },

  stationIdentify() {
    I.click(this.item.stationIdentify);
  },

  operator() {
    I.click(this.item.operator);
  },

  operatorPressPallets() {
    I.click(this.item.operatorPressPallets);
  }
}

When I attempt to run the test, I get the following error

  1) Common logon/logoff scenarios
       Test drawer class:
     Cannot read property 'react' of undefined

Any assistance with what I am missing here would be greatly appreciated.

Thanks, all

Bob

Answer 1

Turns out the code I had was correct and this ended up being an issue with my editor not handling code completion well so the methods of interest were not displaying as I had expected them to.