-
-
Notifications
You must be signed in to change notification settings - Fork 6.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Syntax Error: Invalid or unexpected token" with .png #2663
Comments
Check out http://facebook.github.io/jest/docs/tutorial-webpack.html#content EDIT: new link is https://jestjs.io/docs/en/webpack |
@matheusml did you solve this at all? @cpojer I can confirm I'm having this issue too. I have static assets outside my source. i.e. My directory structure looks like:
My jest config looks similar to the example given in the link: "jest": {
"collectCoverageFrom": [ "src/**/*.{js,jsx}" ],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "tests/__mocks__/fileMock.js"
}
} My test fails when it tries to import the image: import thumbnail from 'img/thumbnail.png' I guess its important to note that if I don't include the Is this expected? Should it really validate the existence of an import event though the module mapping is already setup? Otherwise I get the same error as above. I haven't tried any other type of import in the name mapper. |
I am facing the same issue, I am trying to have reactjs server rendering implemented. Any fix for this. |
I have put this in my babelrc and things seem to be working: { |
Same type error
|
I also seem to be having this issue as well. It only happens when I require the png.
|
Same error as well. Does someone fix it? |
Have the same error with .mp3, Nothing helps |
Errors like this may also be a result of using a preset with absolute paths set in module name mapper for example. This case however will be fixed in the next release |
I had the same error and resolved it by creating a assetsTransformer.js:
Then add this to your jest configuration in package.json: Source: https://facebook.github.io/jest/docs/webpack.html#content |
In my case, I didn't realize that |
* removed react-router form package.json & installed react-router-dom. * completed index.src refactor. * re-implemented App.js * added notes to import changes & App.js * modified middleware array @ store/configureStore.js * updated yarn.lock file with fresh `yarn` command. * updated master branch. * upgraded react-hot-reloader to @3.0.0-beta.6 * removed extra "document.getElementById(app) from Root.js * moved react-router-redux to regular "dependencies" from "dev-dependencies" * cleaned Root.propTypes. * cleaned Root.js & App.js per @oshalygin feedback. * replaced .gitignore comment. * removed react-router form package.json & installed react-router-dom. * completed index.src refactor. * re-implemented App.js * added notes to import changes & App.js * Update FAQ.md fixed header on FAQ page * Update README.md fixed a few headers improperly declared * modified middleware array @ store/configureStore.js * Add react hot loader 3 (#392) - This commit wires up react-hot-loader 3 to be used in the application. There are numerous benefits to the latest release, all of which can be seen at https://github.com/gaearon/react-hot-loader - Note that the specific implementation around wrapping in a Root component is part of how react-hot-loader 3 needs to be configured. - Note that the package is brought in as a dependency, not a dev dependency because of how it is switched at runtime or not. - More information on the migration can be viewed at: https://github.com/gaearon/react-hot-loader/tree/master/docs\#migration-to-30 Related: #216 * Updated react-hot-loader to correct package version. (#401) * Add item to check if issues * updated yarn.lock file with fresh `yarn` command. * Fix formatting (#403) * updated master branch. * upgraded react-hot-reloader to @3.0.0-beta.6 * removed extra "document.getElementById(app) from Root.js * moved react-router-redux to regular "dependencies" from "dev-dependencies" * cleaned Root.js & App.js per @oshalygin feedback. * replaced .gitignore comment. * clean index.js * Add CONTRIBUTE.md (#431) * Add * Updated yarn lock using upgrade * Rename * Update * Upgrade to webpack 3 * Update yarn lock * Update snapshot * Set prod env when analyzing bundle * Add jest-cli as dependency * Revert PR #450 (#451) Removed change that removed additional dashes in npm test scripts in favor of adding jest-cli as a devDep. This commit instead focusses on issue 2 from #449 where setupPrompts.js had a bug that caused start script to fail. * Issue #449 fix (#450) * Issue #449 fix Issue 1: Removed extra dashes located in the package.json test scripts that cause start script to fail. Issue 2: Removed escape characters found in setupPrompts.js which cause linting to fail, thus breaking start script. * Jest fix Re-added previously removed dashes from test scripts in package.json that caused start script to fail. Instead, @coryhouse added in jest-cli as a dev-dep which resolves the issue. * Enhance babel env config to transpile for IE9+ (#452) * Fix for jest handling of static assets when running tests. See: (#457) jestjs/jest#2663 (comment) * Added tips for npm run lint and build errors (#151) (#460) * pushing changes from upstream fetch. * updated from rebase. * modified package versions in package.json & created new build. * update package.json * fixed conflicts with upstream master. * cleaned up PropTypes validations - react-router-redux throwing PropTypes error. * comment spell check & de-console on Root.js
I added the PNG:
SVG:
My folder structure is basically:
Apparently, the files are still loaded instead of mocked away, but i have no clue how to debug this. .babelrc:
package.json:
|
I am dumb, i had another |
Got it working. Here are the important bits (please note that i have some additional config due to enzyme 3 with react 16):
Hope that helps someone. |
I was having issues with a
|
For anyone looking into this issue @timgivois way works beautifully for me. You have to do install
|
While the solution by @mbaranovski works, I don't know if his intention was to use it as a transformer. It produces the following output (pay attention to the src attribute):
Essentially, it is mapping everything from that module to the place where I required an SVG. Thus, you could get away with that module simply being:
The other work-around as stated above is to use identity-obj-proxy. |
it saves my day. Thanks!!. |
@mbaranovski It worked just fine when I ran only jest for test. Sadly when I try to run through the react-scripts from create-react-app I get
Is there a workaround for this ? Or the only solution is to eject create-react-app? |
I don't think CRA supports that option. I'm not sure why it wants to close down options, probably a good reason 🙂 /cc @gaearon |
Another workaround:
|
The given link is broken |
I took a cue from this and installed |
* removed react-router form package.json & installed react-router-dom. * completed index.src refactor. * re-implemented App.js * added notes to import changes & App.js * modified middleware array @ store/configureStore.js * updated yarn.lock file with fresh `yarn` command. * updated master branch. * upgraded react-hot-reloader to @3.0.0-beta.6 * removed extra "document.getElementById(app) from Root.js * moved react-router-redux to regular "dependencies" from "dev-dependencies" * cleaned Root.propTypes. * cleaned Root.js & App.js per @oshalygin feedback. * replaced .gitignore comment. * removed react-router form package.json & installed react-router-dom. * completed index.src refactor. * re-implemented App.js * added notes to import changes & App.js * Update FAQ.md fixed header on FAQ page * Update README.md fixed a few headers improperly declared * modified middleware array @ store/configureStore.js * Add react hot loader 3 (#392) - This commit wires up react-hot-loader 3 to be used in the application. There are numerous benefits to the latest release, all of which can be seen at https://github.com/gaearon/react-hot-loader - Note that the specific implementation around wrapping in a Root component is part of how react-hot-loader 3 needs to be configured. - Note that the package is brought in as a dependency, not a dev dependency because of how it is switched at runtime or not. - More information on the migration can be viewed at: https://github.com/gaearon/react-hot-loader/tree/master/docs\#migration-to-30 Related: #216 * Updated react-hot-loader to correct package version. (#401) * Add item to check if issues * updated yarn.lock file with fresh `yarn` command. * Fix formatting (#403) * updated master branch. * upgraded react-hot-reloader to @3.0.0-beta.6 * removed extra "document.getElementById(app) from Root.js * moved react-router-redux to regular "dependencies" from "dev-dependencies" * cleaned Root.js & App.js per @oshalygin feedback. * replaced .gitignore comment. * clean index.js * Add CONTRIBUTE.md (#431) * Add * Updated yarn lock using upgrade * Rename * Update * Upgrade to webpack 3 * Update yarn lock * Update snapshot * Set prod env when analyzing bundle * Add jest-cli as dependency * Revert PR #450 (#451) Removed change that removed additional dashes in npm test scripts in favor of adding jest-cli as a devDep. This commit instead focusses on issue 2 from #449 where setupPrompts.js had a bug that caused start script to fail. * Issue #449 fix (#450) * Issue #449 fix Issue 1: Removed extra dashes located in the package.json test scripts that cause start script to fail. Issue 2: Removed escape characters found in setupPrompts.js which cause linting to fail, thus breaking start script. * Jest fix Re-added previously removed dashes from test scripts in package.json that caused start script to fail. Instead, @coryhouse added in jest-cli as a dev-dep which resolves the issue. * Enhance babel env config to transpile for IE9+ (#452) * Fix for jest handling of static assets when running tests. See: (#457) jestjs/jest#2663 (comment) * Added tips for npm run lint and build errors (#151) (#460) * pushing changes from upstream fetch. * updated from rebase. * modified package versions in package.json & created new build. * update package.json * fixed conflicts with upstream master. * cleaned up PropTypes validations - react-router-redux throwing PropTypes error. * comment spell check & de-console on Root.js
only @eddyerburgh 's solution worked for me. |
@magnusart |
I had this png problem after adding I tried #2663 (comment) (@magnusart using Eventually, I tried #2663 (comment) (@cpojer the |
If anyone is getting this error with SVG, probably can use this lib, it worked really well for me https://www.npmjs.com/package/jest-svg-transformer I only added on my
And the code on this file is this you guys can ignore moduleNameMapper, is just because I'm using custom import with babel |
- jestjs/jest#2663 (comment) - 테스트코드 일부 추가
- jestjs/jest#2663 (comment) - 테스트코드 일부 추가
I was experiencing this on React Native as well, when attempting to jest test a file with React Navigation v5 Stack.Navigator and Stack.Screens in it. ● Test suite failed to run
E:\my\working\directory\myproject\node_modules\@react-navigation\stack\lib\commonjs\views\assets\back-icon.png:1
�PNG
SyntaxError: Invalid or unexpected token
at compileFunction (<anonymous>)
at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
at Object.<anonymous> (node_modules/@react-navigation/stack/lib/commonjs/index.tsx:13:3) This is on React Native 0.63.3 with the following installed in the project dependencies.
What fixed this for me was:
I believe in my case the moduleNameMapper was the only one really needed, but I'm keeping both for now as it works. Hopefully this may help another that runs into this. |
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){�PNG None of the above answers has solved my problem |
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
I'm trying to test a simple module, but I'm getting this error:
This is the test:
This is my package.json:
And this is the fileMock.js:
Thanks!
The text was updated successfully, but these errors were encountered: