Geek Answers Handbook

Use babel-jest for fun, but still get syntax error

I'm new to the joke and want to test my response.js app. I follow the book, React.js Essentials for the jest part.

Here is my test code, Button-test.js

jest.dontMock('../Button.react'); describe('Button component', function () { it('calls handler function on click', function () { var React = require('react'); var TestUtils = require('react-addons-test-utils'); var Button = require('../Button.react'); var handleClick = jest.genMockFunction(); var button = TestUtils.renderIntoDocument( <Button handleClick={handleClick}/> ); var buttonInstance = TestUtils.findRenderedDOMComponentWithTag(button, 'button'); TestUtils.Simulate.click(buttonInstance); expect(handleClick).toBeCalled(); var numberOfCallsMadeIntoMockFunction = handleClick.mock.calls.length; expect(numberOfCallsMadeIntoMockFunction).toBe(1); }); });

Here is my package.json

 { "name": "snapterest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "jest" }, "author": "", "license": "ISC", "devDependencies": { "babel-jest": "^6.0.1", "babelify": "^6.2.0", "browserify": "^12.0.1", "gulp": "^3.9.0", "jest-cli": "^0.8.0", "vinyl-source-stream": "^1.1.0" }, "dependencies": { "react": "^0.14.0-beta3", "react-dom": "^0.14.0-beta3", "snapkite-stream-client": "^1.0.3" }, "jest": { "scriptPreprocessor": "<rootDir>/node_modules/babel-jest", "testFileExtensions": ["es6", "js"], "unmockedModulePathPatterns": [ "<rootDir>/node_modules/react" ] } }

The problem is that when starting the npm test, it reports the following syntax error. I think babel-jest is installed and I have no idea why the syntax error still exists. Is there anything else I need to do besides installing babel-jest?

 source/components/__tests__/Header-test.js ● Runtime Error SyntaxError: /snapterest/source/components/__tests__/Header-test.js: Unexpected token (11:6) 9 | 10 | var button = TestUtils.renderIntoDocument( > 11 | <Button handleClick={handleClick}/> | ^ 12 | );
+6
source share
2 answers

Are you using babelify v7? If so, you may have followed the patch indicated here , which adds preset to your gulpfile. The same thing should happen with the test, but since this is done separately, you can add this to the .babelrc file in the root of your project:

 { "presets": ["react"] }

The npm test should work correctly.

+3
source 
 npm install react-addons-test-utils babel-preset-es2015 babel-preset-react --save-dev

http://facebook.imtqy.com/jest/docs/tutorial-react.html#content

-1
source

More articles:


All Articles