Jest - Can't find module Error for split-pane-react

Question

I am trying to test my component with [email protected] with Jest in a Next.js project with typescript.

I am receiving the error as : Cannot find module 'split-pane-react' from 'my component path' on running the test case.

I have tried adding the path in moduleNameMapper in jest.config.js as 'split-pane-react': '<rootDir>/node_modules/split-pane-react/esm/index.js' but it is giving an error of export like this

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from './SplitPane';
                                                                                      ^^^^^^
SyntaxError: Unexpected token 'export'

I have also tried transformIgnorePatterns for the export issue but that also doesn't work.

Package versions:
"react": "18.2.0",
"next": "12.3.4",
"jest": "29.7.0",
"ts-jest": "29.1.1",
"ts-node": "10.9.1",

Answer 1

For current bypass fix, what I did is passed the path inside jest.config.js for the moduleNameMapper like:

{ 
  moduleNameMapper: {
    'split-pane-react': '<rootDir>/node_modules/split-pane-react/esm/index.js'
  }
}

This will still through an error, due to not parsing the file which is redirected, for this what you have to do to is mock the complete package to your requirement inside the setupFilesAfterEnv like this:

jest.mock('split-pane-react', () => ({
  __esModule: true,
  default: jest.fn(({ children, sashRender, allowResize }) => (
    <>
      {children}
      {sashRender && sashRender(1, allowResize)}
    </>
  )),
  Pane: jest.fn(({ children }) => <>{children}</>)
}));