Jest: Cannot read property of undefined when importing from own package nextjs

Question

Got this weird bug when running the jest test, one of the UI component from a self defined UI package keeps throwing error, saying that an object in that package is undefined...

The component itself works perfectly fine, and the same component's testing logic works in another repo without nextjs, and that repo utilize @swc/jest for js transform in jest.config file.

I've also added that package itself to transformIgnorePatterns in jest-config file, but somehow the bug still presents...

The project itself is in nextjs, and below is a snapshot of the jest.config file

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */

module.exports = {
  testPathIgnorePatterns: [
    '<rootDir>/.next/',
    '<rootDir>/node_modules/',
    '<rootDir>/e2e/'
  ],
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  setupFiles: [require.resolve('whatwg-fetch')],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }]
  },
  transformIgnorePatterns: ['/node_modules/myPackage', 'jest-runner'],
  testMatch: ['**/*.spec.{js,jsx,ts,tsx}'],
};

and the error itself goes Error: Uncaught [TypeError: Cannot read property 'object' of undefined], which tracks down to /node_modules/myPackage

how the package is used

import { InputBox } from 'myPackage';

const MyComponent = () => {
  return (
    <div>
      <InputBox />
    </div>
  );
}

export default MyComponent;

and here's the test:

import { act, render } from '@testing-library/react';
import React from 'react';

describe('show component', () => {
  it('should render', async () => {
    await act(async () => {
      render(
        <MyComponent/>
      );
    });    
  });
});

I've found a similar question on stackoverflow Jest: Cannot read property of undefined when importing from own package

but that one is using regular js, and this one being next.js, there's really nowhere I can update .babelrc to update those configs...

Any input would be appreciated.

Update: it turns out the component that causes me bug is built on top of react-popper library, which is built on top of popper.js library. popper.js library doesn't support jsdom by default, and it requires to do jest mock. But my library is 2 layers abstractions on top of popper.js library, I'm not sure how to do that, or even if that is doable...

Jest: Cannot read property of undefined when importing from own package nextjs

0 Answers0