I'm trying to unit test but the only way I can stop the error throwing is to comment out the import './styles.css
line.
As soon as I put it back in I get:
Jest encountered an unexpected token
...
SyntaxError: Unexpected token.
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
> 3 | import './styles.css';
| ^
4 |
5 |
I have webpack, babel, jest, enzyme all configured but googling tells me there's a difference between running the app (via webpack) and using .css files vs running tests that can read .css
files, which would need to be configured separately.
For love nor money, I cannot find an example where import './styles.css
is successfully imported & the tests pass.
Can anyone help?
babel-node
? The issue is Webpack understands that this code needs bundled where as if you are just trying to run tests via Node then Node won't understand that, in fact unless you have ESM enabled, it won't even understandimport
. You may need to look at something like babel-jest to compile your test code before you run."'import' and 'export' may only appear at the top level"
babel-jest
working (see earlier comment^ ), but even this is a tad confusing. Jest's documentation for config is light on full, useable examples. Myjest.config.js
has atestPathIgnorePatterns
key value and calls in thejest.setup.js
file. But babel-jest is apparently already wrapped up into jest itself, which means config changes for it aren't necessary, i'm guessing - maybe this leaves me withbabel-node
as a last option. 😕