TypeError: Cannot read property 'prototype' of undefined

[sebpowell]

I've tried setting this up using the example provided in the documentation:

Whenever I try running the using Jest, I get the following error:

It seems like it's something related to Babel, but I couldn't find anything about this error online. It also seems to be related to this package, as my other tests are running without any problems.

I'm using Next.js with Typescript (with the exception of the above test files, which I left in JS to rule out any compilation errors).

Any pointers would be greatly appreciated!

[joshuaellis]

My first idea would be to try and declare a custom babel config that is only used with your tests. So in your jest.config.js (if you haven't got one make one), you'd add:

module.exports = {
  transform: {
    '\\.js$': ['babel-jest', { configFile: './babel.config.jest.js' }]
  },
};

or whatever the custom babel config is and it's location.

Then create a new babel config that could look something like this:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current'
        }
      }
    ]
  ]
}

I'd start there, this could be an issue with nextjs inbuilt babel config. What version of next are you using?

[sebpowell]

@joshuaellis – thanks for the suggestion! I gave that a go, but no luck – still getting the same error.

I'm using the latest version of Next.js (11.1.2).

[sebpowell]

In case it helps, this is what my jest.config.js file looks like:

And this is my .babelrc file (updated with your above suggestion):

[mpeyper]

Hey @sebpowell, is this still an issue for you?

It looks to me like whatever version of @babel/runtime that is intalled in your root directory is not compatible with what react-error-boundary (our dependency) is expecting and it's not getting it's own version installed to use instead. That or something is causing it to resolve to the root version instead somehow (perhaps the next/babel preset?).

What does running npm ls @babel/runtime output for you (or the yarn equivalent)?

[sebpowell]

Hey @mpeyper, thanks for your message!

It is, yes – I haven't yet found the solution. It definitely looks like it's related to Babel. I've tried uninstalling / reinstalling, but no luck so far. I'm going to try setting it up in a completely new Next.js project to rule out any problems caused by other packages, but I haven't got round to it yet.

Here's what npm ls @babel/runtime gives me – let me know if you can spot anything:

├─┬ @reduxjs/[email protected]
│ └─┬ [email protected]
│   └── @babel/[email protected] deduped
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ [email protected]
│ │ │ └── @babel/[email protected] deduped
│ │ └─┬ [email protected]
│ │   └── @babel/[email protected] deduped
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ @emotion/[email protected]
│ │ │ └── @babel/[email protected] deduped
│ │ ├─┬ @emotion/[email protected]
│ │ │ └─┬ @emotion/[email protected]
│ │ │   └── @babel/[email protected] deduped
│ │ └─┬ [email protected]
│ │   └── @babel/[email protected] deduped
│ ├─┬ [email protected]
│ │ └── @babel/[email protected] deduped
│ └─┬ [email protected]
│   └── @babel/[email protected] deduped
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   ├─┬ @babel/[email protected]
│   │ └─┬ @babel/[email protected]
│   │   └─┬ [email protected]
│   │     └── @babel/[email protected] deduped
│   └─┬ @storybook/[email protected]
│     ├─┬ @storybook/[email protected]
│     │ └─┬ [email protected]
│     │   └── @babel/[email protected] deduped
│     └─┬ [email protected]
│       └── @babel/[email protected] deduped
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   ├─┬ [email protected]
│   │ └── @babel/[email protected] deduped
│   ├─┬ [email protected]
│   │ └── @babel/[email protected] deduped
│   ├─┬ [email protected]
│   │ ├── @babel/[email protected] deduped
│   │ └─┬ [email protected]
│   │   └── @babel/[email protected] deduped
│   ├─┬ [email protected]
│   │ └── @babel/[email protected] deduped
│   └─┬ [email protected]
│     └── @babel/[email protected] deduped
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ [email protected]
│ │ │ └── @babel/[email protected] deduped
│ │ └─┬ [email protected]
│ │   └── @babel/[email protected] deduped
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── @babel/[email protected] deduped
├─┬ @testing-library/[email protected]
│ ├── @babel/[email protected]
│ └─┬ [email protected]
│   └── @babel/[email protected] deduped
├─┬ @testing-library/[email protected]
│ ├── @babel/[email protected] deduped
│ └─┬ @testing-library/[email protected]
│   └── @babel/[email protected] deduped
├─┬ @testing-library/[email protected]
│ └── @babel/[email protected] deduped
├─┬ [email protected]
│ └── @babel/[email protected]
├─┬ [email protected]
│ └── @babel/[email protected] deduped
├─┬ [email protected]
│ ├── @babel/[email protected] deduped
│ └─┬ [email protected]
│   └── @babel/[email protected] deduped
├─┬ [email protected]
│ └── @babel/[email protected]
├─┬ [email protected]
│ └── @babel/[email protected] deduped
├─┬ [email protected]
│ └── @babel/[email protected] deduped
├─┬ [email protected]
│ ├── @babel/[email protected] deduped
│ └─┬ [email protected]
│   └── @babel/[email protected]
└─┬ [email protected]
  └── @babel/[email protected] deduped

[joshuaellis]

Have you seen this? https://nextjs.org/docs/testing#manual-setup-1

I think you need to modify your transform key in the jest-config to include next/babel:

transform: {
    /* Use babel-jest to transpile tests with the next/babel preset
    https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object */
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },

[sebpowell]

@joshuaellis – thanks for the above! Good suggestion, I gave it a go, but same things happens. This is what my jest.config.js file looked like after the changes:

module.exports = {
  collectCoverageFrom: [
    "**/*.{js,jsx,ts,tsx}",
    "!**/*.d.ts",
    "!**/node_modules/**",
  ],
  moduleDirectories: ["node_modules", "./"],
  setupFilesAfterEnv: ["<rootDir>/config/setupTests.js"],
  testPathIgnorePatterns: ["/node_modules/", "/.next/"],
  transform: {
    /* Use babel-jest to transpile tests with the next/babel preset
    https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object */
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },

  testEnvironment: "jest-environment-jsdom",
  transformIgnorePatterns: [
    "/node_modules/",
    "^.+\\.module\\.(css|sass|scss)$",
  ],
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
};

This weekend I'll try getting it up and running in a fresh Next.js project to see if it might have anything to do with other packages, will let you know if I find anything (or let me know if you have any other ideas of what it might be).

[chuntaoXu]

后面是怎么解决的呢

[joshuaellis]

Closing due to inactivity