question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Replacing import { h } with React doesn't work in jest tests

See original GitHub issue

Steps to reproduce:

  1. $ preact create default preact (preact-cli v2.2.1) cd ./preact
  2. npm i -D @babel/plugin-transform-react-jsx
  3. Update package.json
"jest": {
    ...
    "moduleNameMapper": {
      "react": "preact/compat",
      "react-dom/test-utils": "preact/test-utils",
      "react-dom": "preact/compat"
    }
  }
  1. in header.test.js replace import { h } from 'preact' with import React from 'react'
  2. in .babelrc add
plugins: [
        ['@babel/plugin-transform-react-jsx', {
          "pragma": "h",
          "pragmaFrag": "Fragment"
        }]
      ]

FAIL tests/header.test.js ● Test suite failed to run

TypeError: Cannot read property 'prototype' of undefined

  3 | 
  4 | configure({
> 5 | 	adapter: new Adapter()
    | 	                                                    ^
  6 | });
  7 | 

  at node_modules/preact/compat/dist/compat.js:1:469
  at Object.<anonymous> (node_modules/preact/compat/dist/compat.js:1:611)
  at Object.<anonymous> (tests/__mocks__/setupTests.js:5:55)

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
ka2ncommented, Jan 9, 2020

Changing moduleNameMapper key to regexp form will fix this issue (At least in my case).

  moduleNameMapper: {
    "^react$": "preact/compat",
    "^react-dom$": "preact/compat",
    "^react-dom/test-utils$": "preact/test-utils",
  },

background:

I ran a jest test with the Chrome Remote Debugger and found that require ('preact') in preact/compat only returned a empty object({}). Then preact/compat try to extend require('preact').Component, but it’s undefined in this situation.

1reaction
alxclarkcommented, Jan 15, 2020

@ka2n Had the same issue than mentionned by @ssuvorov and it worked for me as well! 🙏

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to resolve "Cannot use import statement outside a ...
After trying all the possible solutions, this worked for me: The solution, that works for me: create a file named jest/mocks/@react-native- ...
Read more >
Setup - Testing Library
You can replace React Testing Library with this file in all your imports. See below for a way to make your test util...
Read more >
Testing with Preact Testing Library
Testing Preact applications made easy with testing-library. ... import { h } from 'preact'; import { useState } from 'preact/hooks'; export function ...
Read more >
Unit Testing - Gatsby
While Gatsby does not include support for unit… ... The most popular testing framework for React is Jest, which was created by ......
Read more >
React Testing Library – Tutorial with JavaScript Code Examples
You need to install Jest because React Testing Library only provides methods to help you write the test scripts. So you still need...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found