using jest vs react-scripts test - reactjs

Question

js and react newbie...playing around with testing frameworks...here's the code:
import React from 'react';
// import CheckboxWithLabel from '../CheckboxWithLabel';
import {shallow} from 'enzyme'; //not installed...
//var x = require ('../CheckboxWithLabel.js');
test('CheckboxWithLabel changes the text after click', () => {
const checkbox = shallow(
<CheckboxWithLabel labelOn="On" labelOff="Off" />
);
expect(checkbox.text()).toEqual('Off');
checkbox.find('input').simulate('change');
expect(checkbox.text()).toEqual('On');
});
The react-scripts test error is:
Cannot find module 'enzyme' from 'checkboxWithLabel-test.js'
While the jest error is:
Jest encountered an unexpected token
SyntaxError: /Users/shriamin/Development/js_prj_react_django_etc/jest_react_demo/my-app/src/__tests__/checkboxWithLabel-test.js: Unexpected token (12:4)
10 | test('CheckboxWithLabel changes the text after click', () => {
11 | const checkbox = shallow(
> 12 | <CheckboxWithLabel labelOn="On" labelOff="Off" />
| ^
13 | );
14 | expect(checkbox.text()).toEqual('Off');
15 | checkbox.find('input').simulate('change');
i have no idea why jest would throw this error...react-scripts test makes sense to me since enzyme is not installed....please tell me does jest suck or am i doing something wrong configuring jest (installed via npm and update package.json).
NOTE: i don't have babel installed...i don't know what that is yet.
thanks

Answer 1

You arrived at the answer yourself. To use jest your tests need to go through babel for the runner to understand react syntax. take a look at the babel-doc to understand it at greater detail. it's just a transformation tool that transforms fancy syntax into something javascript understands. install the following plugins and presets.
Presets
npm i --save #babel/preset-env
npm i --save #babel/preset-react
Plugins
npm install --save babel-plugin-transform-export-extensions
in your .babelrc add the following lines:
{
"env": {
"test": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"transform-export-extensions",
],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
}
}
Now try running jest on the command-line from your project directory to make sure your tests are configured correctly.
react-scripts is a preconfigured set of commands that come out of the box with create-react-app if you want to use that instead of jest command, check here.
react-scripts expects your tests folder location to follow a certain convention.
this is probably why the tests weren't getting fetched when the react-scripts test command was run out of the box.

Answer 2

in package.json change
"scripts": {
"test": "jest",
},
to the following:
"scripts": {
"test": "react-scripts test",
},
i.e. don't change to jest in the first place

Answer 3

The error described here seem to be jsx that isn't interpreted, isn't your test file extension js instead of jsx ?