npm test fails with assets imported from node_modules folder
See original GitHub issueI have published a number of in-house components that package up CSS and images so they can be included in a Webpack project like this:
import MyComponent from 'my-component'
import 'my-component/css/Styles.css'
import logo from 'my-component/img/CorporateLogo.png'
This has worked great with CRA and my apps run and build correctly.
However, any attempt to test code that includes CSS/images in this way with CRA 0.4.1 will fail - almost as if testing treats anything imported from node_modules
as JavaScript.
e.g. when running a test of a component that imports a PNG from node_modules/my-component/img:
FAIL src\App.test.js
● Test suite failed to run
C:\Users\<user>\Projects\my-app\node_modules\my-component\img\logo.png:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
^
SyntaxError: Unexpected token ILLEGAL
at transformAndBuildScript (node_modules\react-scripts\node_modules\jest-runtime\build\transform.js:284:10)
at Object.<anonymous> (src\App.js:3:38)
at Object.<anonymous> (src\App.test.js:3:38)
Any ideas or workarounds would be welcome.
Issue Analytics
- State:
- Created 7 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
What could cause an error related to npm not being able to ...
Delete node_modules folder manually. · Open command prompt , go to path angular folder and run Yarn. · Run angular\nswag\refresh.bat. · Run npm...
Read more >cannot find module [Node npm Error Solved] - freeCodeCamp
you're trying to import an item from a module you don't have installed in your project directory; you're importing some things from an...
Read more >Configuring Jest
This option tells Jest that all imported modules in your tests should be mocked automatically. All modules used in your tests will have...
Read more >@rollup/plugin-node-resolve - npm
This plugin honours the rollup preserveSymlinks option. Using with @rollup/plugin-commonjs. Since most packages in your node_modules folder are ...
Read more >CommonJS modules | Node.js v19.3.0 Documentation
Used to import modules, JSON , and local files. Modules can be imported from node_modules . Local modules and JSON files can be...
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
The problem seems to be in the
moduleNameMapper
Jest configuration used in create-react-app. It only matches paths consisting of alphanumeric characters, so files with special characters like@
are not correctly stubbed in the tests. I’m making a pull request to fix this.Hi, apologies for commenting on such an old issue, but I seem to be having a similar issue as I reported in #4262.
Is this related and a regression? The
moduleNameMapper
inscripts/utils/createJestConfig.js
seems to have changed a great deal since this was fixed here.