Test suite failed to run / jest.mock()

Question

Initially, the client side (TypeScript) of our web application did not write unit test code. This time, only the input parts of the existing screens are re-creating now. We are adding new input components and switching existing screens to use new input components. For the first time, we plan to write unit test code and conduct unit tests for the newly added new input component classes.

The existing screen classes (before introducing Jest) was implemented by the classes with namespace as follows. [with namespace(aaa.bbb.ccc.~), don't export namespace, export class, import class(specified namespace)]

// Entry1.ts : The existing screen class
module aaa.bbb.ccc.ddd.eee {
    import AlertDialog = aaa.bbb.ccc.overlaycomponent.AlertDialog;
    export class Entry1 {
        private alertDialog: AlertDialog;
    }
}

Since unit testing cannot be performed with Jest in the above implementation, the following implementation is used for the newly added input component classes that performs unit testing with Jest. [with namespace(aaa.bbb.ccc.~), export namespace, export class, import namespace(specified file path)]

// zGrid.ts : The newly added input component class 1
import { aaa as aaa1 } from './zRow';
import ZRow = aaa1.bbb.ccc.controls.zGrid.ZRow;

export module aaa.bbb.ccc.controls.zGrid {
    /** Zeta Grid */
    export class ZGrid {
        private rows: ZRow[];
        constructor() {
            this.rows = [new ZRow(), new ZRow(), new ZRow()];
        }
        public getCount(): number {
            let total: number = 0;
            this.rows.forEach((value: ZRow, index: number, array: ZRow[]) => {
                total += value.getColCount();
            }, this);
            return total;
        }
    }
}

// zRow.ts : The newly added input component class 2
import { aaa as aaa1 } from './zColumn';
import ZColumn = aaa1.bbb.ccc.controls.zGrid.ZColumn;

export module aaa.bbb.ccc.controls.zGrid {
    /** Zeta Grid Row */
    export class ZRow {
        private cols: ZColumn[];
        constructor() {
            this.cols = [new ZColumn(), new ZColumn()];
        }
        public getColCount(): number {
            return this.cols.length;
        }
    }
}

Q 1

Unit test code (without Mock) works fine.

// zGrid.test.ts : (for the newly added input component class 1 : zGrid.ts)
import { mocked } from 'ts-jest/utils';

import { aaa as aaa1 } from './zGrid';
import ZGrid = aaa1.bbb.ccc.controls.zGrid.ZGrid;
import { aaa as aaa2 } from './zRow';
import ZRow  = aaa2.bbb.ccc.controls.zGrid.ZRow;

describe("case1", () => {
    it("pat1", () => {
        let grid = new ZGrid();
        expect(grid.getCount()).toBe(6);
    });
});

Unit test code (with Mock) works too. (Test suite ran.)

// zGrid.test.ts : (for the newly added input component class 1 : zGrid.ts)
import { mocked } from 'ts-jest/utils';

import { aaa as aaa1 } from './zGrid';
import ZGrid = aaa1.bbb.ccc.controls.zGrid.ZGrid;
import { aaa as aaa2 } from './zRow';
import ZRow  = aaa2.bbb.ccc.controls.zGrid.ZRow;

jest.mock('./zRow'); // diff

describe("case1", () => {
    it("pat1", () => {
        let grid = new ZGrid();
        expect(grid.getCount()).toBe(6);
    });
});

But, Unit test code (with Mock) got fail. What's Going on?

// zGrid.test.ts : (for the newly added input component class 1 : zGrid.ts)
import { mocked } from 'ts-jest/utils';

import { aaa as aaa1 } from './zGrid';
import ZGrid = aaa1.bbb.ccc.controls.zGrid.ZGrid;
import { aaa as aaa2 } from './zRow';
import ZRow  = aaa2.bbb.ccc.controls.zGrid.ZRow;

// diff (begin)
jest.mock('./zRow', () => {
    return {
        ZRow: jest.fn().mockImplementation(() => {
            return {
                getColCount: () => { return 1 },
            };
        })
    };
});
// diff (end)

describe("case1", () => {
    it("pat1", () => {
        let grid = new ZGrid();
        expect(grid.getCount()).toBe(3);
    });
});

Failed output

>yarn jest zGrid.test.ts
yarn run v1.22.5
$ C:\zzz\Scripts\node_modules\.bin\jest zGrid.test.ts
 FAIL  yyy/controls/zGrid.test.ts
   Test suite failed to run

    TypeError: Cannot read property 'bbb' of undefined

      1 | import { aaa as aaa1 } from './zRow';
    > 2 | import ZRow = aaa1.bbb.ccc.controls.zGrid.ZRow;
        |                    ^
      3 |
      4 | export module aaa.bbb.ccc.controls.zGrid {
      5 |     /** Zeta Grid */

      at yyy/controls/zGrid.ts:2:20
      at yyy/controls/zGrid.js:3:17
      at Object.<anonymous> (yyy/controls/zGrid.js:9:3)
      at Object.<anonymous> (yyy/controls/zGrid.test.ts:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        10.919 s
Ran all test suites matching /zGrid.test.ts/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Q 2

We want to use ZGrid class(zGrid.ts) in Entry1 class(Entry1.ts), but we can't find "How to import ZGrid class in Entry1 class". Hybrid implementation with "Exporting namespace & class" src code (zGrid.ts) & "Exporting class" src code (Entry1.ts) is impossible?

The development environment is as follows.

• Windows 10
• Visual Studio ver.2017 or 2019
• TypeScript ver.2.9.2
• Jest ver.26.6
• ts-jest ver.26.4.4
• Yarn ver.1.22.5
• Node.js ver.12.18.4

Answer 1

Q 1

I found the answer.

// zGrid.test.ts : (for the newly added input component class 1 : zGrid.ts)
import { mocked } from 'ts-jest/utils';

import { aaa as aaa1 } from './zGrid';
import ZGrid = aaa1.bbb.ccc.controls.zGrid.ZGrid;
import { aaa as aaa2 } from './zRow';
import ZRow  = aaa2.bbb.ccc.controls.zGrid.ZRow;

// diff (begin)
jest.mock('./zRow', () => {
    return {
        aaa: { // Added!
            bbb: { // Added!
                ccc: { // Added!
                    controls: { // Added!
                        zGrid: { // Added!
                            ZRow: jest.fn().mockImplementation(() => {
                                return {
                                    getColCount: () => { return 1 },
                                };
                            })
                        } // Added!
                    } // Added!
                } // Added!
            } // Added!
        } // Added!
    };
});
// diff (end)

describe("case1", () => {
    it("pat1", () => {
        let grid = new ZGrid();
        expect(grid.getCount()).toBe(3);
    });
});