Replacing import { h } with React doesn't work in jest tests
See original GitHub issueSteps to reproduce:
$ preact create default preact
(preact-cli v2.2.1)cd ./preact
npm i -D @babel/plugin-transform-react-jsx
- Update package.json
"jest": {
...
"moduleNameMapper": {
"react": "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat"
}
}
- in header.test.js replace
import { h } from 'preact'
withimport React from 'react'
- 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:
- Created 4 years ago
- Comments:9 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Changing
moduleNameMapper
key to regexp form will fix this issue (At least in my case).background:
I ran a jest test with the Chrome Remote Debugger and found that
require ('preact')
inpreact/compat
only returned a empty object({}
). Thenpreact/compat
try to extendrequire('preact').Component
, but it’sundefined
in this situation.@ka2n Had the same issue than mentionned by @ssuvorov and it worked for me as well! 🙏