2017.1: Jest + JSX?

I just upgraded to v2017.1, and am thrilled to finally have support for Jest runners. I previously used a node Run configuration to run babel-node to test my Jest-based React tests (that include JSX).

 

Does your new Jest runner have a means to test JSX-based unit tests?

0
18 comments

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

1

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

0

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?
0

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

0

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?

0

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"

 

0

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

0

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'
}
};

```

0

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)

0

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
0

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

0

yeah, but it says

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

Works fine for me:

 

project that shows up the issue would be helpful

0

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?

0

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

0

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

0

Please sign in to leave a comment.