2017.1: Jest + JSX?

 Sure your can use Jest runner to run spec files defined in .jsx files

I have a `ListProjectsModalSpec.js` file, which contains this code:

beforeEach(() => {
  let id = 0;
  dummyProject = () => {
    id++;
    return {
      name: 'myProject',
      updated_at: new Date(Date.now()).toString(),
      id: id
    }
  }
  projects = [dummyProject(), dummyProject(), dummyProject()];
  projectController = new DrawingEditor().drawingController();

  mountView = () => {
    return mount(<ListProjectsModal projects={projects} projectController={projectController} />);
  };
});

This runs fine using babel-node processing `node_modules/react-scripts/scripts/test.js`.

I tried setting up a Jest Run configuration, but it gives the following error message:

```
src/__tests__/views/ListProjectsModalSpec.js
 ● Test suite failed to run

 SyntaxError: /Users/gap/Projects/RoleModel/ConstructionDesigner/libraries/drawing-editor-react/src/__tests__/views/ListProjectsModalSpec.js: Unexpected token (25:19)
 23 | 
 24 | mountView = () => {
 > 25 | return mount(<ListProjectsModal projects={projects} projectController={projectController} />);
 | ^
 26 | };
 27 | });
 28 | 
 
 at Parser.pp$5.raise (node_modules/babylon/lib/index.js:4373:13)
 at Parser.pp.unexpected (node_modules/babylon/lib/index.js:1716:8)
 at Parser.pp$3.parseExprAtom (node_modules/babylon/lib/index.js:3683:12)
 at Parser.pp$3.parseExprSubscripts (node_modules/babylon/lib/index.js:3427:19)
 at Parser.pp$3.parseMaybeUnary (node_modules/babylon/lib/index.js:3407:19)
 at Parser.pp$3.parseExprOps (node_modules/babylon/lib/index.js:3337:19)
 at Parser.pp$3.parseMaybeConditional (node_modules/babylon/lib/index.js:3314:19)
 at Parser.pp$3.parseMaybeAssign (node_modules/babylon/lib/index.js:3277:19)
 at Parser.pp$3.parseExprListItem (node_modules/babylon/lib/index.js:4231:16)
 at Parser.pp$3.parseCallExpressionArguments (node_modules/babylon/lib/index.js:3506:20)

```

Do you have suggestions on how to use your Jest runner with JSX-laden unit tests?

By the way, how do I format my posts here? Triple backtick doesn't seem to work to indicate pre-formatted code... 

I don't have problems running spec files with JSX code. What does your run configuration look like? What versions of Node.js and Jest do you use?

Using Node 6.10, Jest 17.0.3, and for Jest Run Configuration "Jest Package" I filled in "~/Projects/RoleModel/ConstructionDesigner/libraries/drawing-editor-react/node_modules/jest"

I.m using jest 17.0.2" with Node.js 6.10, and don't have problems like yours. Please provide a screenshot of your Run configuration plus Jest config file (if any) and .babelrc

Jest config generated automatically by react-scripts using the following logic:

```

const config = {
collectCoverageFrom: ['src/**/*.{js,jsx}'],
setupFiles: [resolve('config/polyfills.js')],
setupTestFrameworkScriptFile: setupTestsFile,
testPathIgnorePatterns: [
'<rootDir>[/\\\\](build|docs|node_modules)[/\\\\]'
],
testEnvironment: 'node',
testURL: 'http://localhost',
transform: {
'^.+\\.(js|jsx)$': isEjecting ?
'<rootDir>/node_modules/babel-jest'
: resolve('config/jest/babelTransform.js'),
'^.+\\.css$': resolve('config/jest/cssTransform.js'),
'^(?!.*\\.(js|jsx|css|json)$)': resolve('config/jest/fileTransform.js'),
},
transformIgnorePatterns: [
'[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'
],
moduleNameMapper: {
'^react-native$': 'react-native-web'
}
};

```

I was asking for your Jest run configuration, not Node.js one...

here is mine:

and your Jest config file is not a valid configuration file (not a JSON)

seems the required polyfills, etc can't be resolved when using the default config used when configuration file is not specified. You can check what config is passed by looking at the command in Jest toolwindow. It might make sense to pass the config explicitly

Hi everyone!

Looks like i'm having a similar problem. I create a regular Jest testing configuration and just run it. But I get the same response back.

 pathtoapp/tests/App.test.js: Unexpected token (11:23)
    9 | 
   10 |     it('renders without crashing', () => {
 > 11 |         expect(shallow(<App />)).toContainReact(<Nav />);
      |                        ^
   12 |     });
   13 | 

Here's the Jest config

My system:

WebStorm 2017.2
Build #WS-172.3317.70, built on July 14, 2017
JRE: 1.8.0_152-release-915-b5 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Mac OS X 10.12.5

Also:

> node --version
v8.1.4

Can you run your Jest tests using jest --env=jsdom ?

If your app is created with create-react-app, try choosing `node_modules\react-scripts` instead of `node_modules\jest-cli` as a Jest package

yeah, but it says

Error: Cannot find module 'pathtoapp/node_modules/react-awesome-scripts/bin/jest'

Works fine for me:

project that shows up the issue would be helpful

Ok I think I get it.

Looks like WebStorm treats “react-scripts” package in a special way. It looks at a specific file: “scripts/test.js”

While at all other packages, including my forked “react-awesome-scripts” it tries “bin/jest” by default which it doesn't have.

Can I somehow specify the full path to the script instead of just a package?

No, not currently possible. Please follow https://youtrack.jetbrains.com/issue/WEB-27863 for updates

Yeah I get it, thanks. I have just created that ticket :)