react_with_node does not work!

[kevinlbatchelor]

I have spent about 6 hours following this tutorial. I finally decided to create a new React 16 app from scratch to make sure there wasn't some sort of configuration problem but I'm going to have to say there is something missing. Either You cannot test a React App with Jasmine or this Tutorial is not correct:

'https://jasmine.github.io/tutorials/react_with_node'

When running the test you get:

Error: While loading C:/dev/basic-react/spec/app.spec.mjs: SyntaxError: Unexpected token '<'
    at fixupImportException (C:\dev\basic-react\node_modules\jasmine\lib\loader.js:141:12)
    at C:\dev\basic-react\node_modules\jasmine\lib\loader.js:39:37
    at async Jasmine._loadFiles (C:\dev\basic-react\node_modules\jasmine\lib\jasmine.js:232:7)
    at async Jasmine.loadSpecs (C:\dev\basic-react\node_modules\jasmine\lib\jasmine.js:223:5)
    at async Jasmine.execute (C:\dev\basic-react\node_modules\jasmine\lib\jasmine.js:495:5)
    at async runJasmine (C:\dev\basic-react\node_modules\jasmine\lib\command.js:160:5)
    at async Command.run (C:\dev\basic-react\node_modules\jasmine\lib\command.js:59:9)

I created this very basic repo to try this out after I couldn't get it working on my project:

https://github.com/kevinlbatchelor/ReactJasmineTest

Any help would be much appreciated. In fact I'll help if someone can point me in the right direction.

[kevinlbatchelor]

One note, the tests will run on basic JS files, but when the test file contains an import of JSX, then babel or something can't deal with it.

[sgravrock]

I haven't had a chance to clone your repo and try it out yet, but I'm guessing the problem is that this rule in webpack.config.js doesn't match the spec file:

            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },

The first thing I'd try is renaming the file to app.spec.jsx or app.spec.js. Webpack is probably compiling everything down to a single file that's not an ES module, so you don't need the .mjs extension.

If that doesn't work, try changing the test to something like /\.(js|jsx|mjs)$/ so that Webpack will run the spec file through Babel. You might also need to add .mjs to the list of extensions.

[sgravrock]

Actually, disregard the above. I misunderstood what's going on. There are basically two problems:

1. Helpers aren't loading because they're in spec/helprs but the config file specifies spec/helpers
2. Babel isn't processing the spec file because it has .mjs extension.

The easiest way to get it all working is to fix the helper file directory name, then rename the spec file to app.spec.ts. You could also use app.spec.tsx if you adjust the spec_files pattern in jasmine.json.

I suspect that you'd have to move away from babel-preset-react-app if you wanted to use the .mjs extension. But there's probably no need for that. Your spec file loads fine as a CommonJS module, presumably because Babel is compiling the ES module syntax to CommonJS before Node runs it.

[sgravrock]

BTW, I've removed the mentions of Enzyme from the tutorial. That recommendation was sadly out of date: Enzyme was a good choice for new projects when the tutorial was first written, but today it's two major React versions behind and doesn't appear to be getting the kind of contributor support that it would take to catch up. I recommend using react-testing-library instead.

[kevinlbatchelor]

So I'll look at your comments. I was fairly sure helpers were being loaded because adding console logs to them shows that they at least get executed. Also, Tests also do execute, but when I import jsx they faile

[kevinlbatchelor]

You were spot on, Thank you for your help, I guess I have to go figure out what is breaking in my real project now Thanks for this.

[sgravrock]

I'm glad I was able to help. Feel free to open another issue if you run into more problems.