Unable to import Reactjs Class for testing with mocha and enzyme

Question

My test file's code is:

var React = require('react');
var {shalow} = require('enzyme')
var {SearchBox} = require('../static/js/functions')
var expect = require('expect');

describe('Test', function(){
  it('1', function(){
    expect(true).toEqual(true);
  });
});

This is my React class in functions.js

var SearchBox = React.createClass({
  render: function() {
    return (
      <div>
        <SearchList data={this.props.data}></SearchList>
        <li>
          <button id="previous_page" className="previous_page" onClick={back}>Previous</button>
          <button id="next_page" className="next_page" onClick={next}>Next</button>
        </li>
      </div>
    )
  }
});

It is working fine but I want to write tests and when I run it, it outputs the following error :

irtza@irtza-Lenovo-G50-70:~/Desktop/Kamal Hasan/pedialink$ mocha ./js_test/*.js /home/irtza/Desktop/Kamal Hasan/pedialink/static/js/functions.js:39 , ^ SyntaxError: Unexpected token < at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:511:25) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:456:32) at tryModuleLoad (module.js:415:12) at Function.Module._load (module.js:407:3) at Module.require (module.js:466:17) at require (internal/module.js:20:19) at Object. (/home/irtza/Desktop/Kamal Hasan/pedialink/js_test/test.js:3:19) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:456:32) at tryModuleLoad (module.js:415:12) at Function.Module._load (module.js:407:3) at Module.require (module.js:466:17) at require (internal/module.js:20:19) at /usr/local/lib/node_modules/mocha/lib/mocha.js:220:27 at Array.forEach (native) at Mocha.loadFiles (/usr/local/lib/node_modules/mocha/lib/mocha.js:217:14) at Mocha.run (/usr/local/lib/node_modules/mocha/lib/mocha.js:485:10) at Object. (/usr/local/lib/node_modules/mocha/bin/_mocha:405:18) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:456:32) at tryModuleLoad (module.js:415:12) at Function.Module._load (module.js:407:3) at Function.Module.runMain (module.js:575:10) at startup (node.js:159:18) at node.js:444:3

Louis Barranqueiro · Accepted Answer · 2016-08-03 11:10:44Z

1

Your code is a mix between ES5 and ES6 syntax.

I think that the problem come from this portion of code :

var React = require('react');
var {shalow} = require('enzyme');
var {SearchBox} = require('../static/js/functions');

If you wanna use ES5 syntax :

var React = require('react');
var shalow = require('enzyme').shalow; // notice how we access object property `.objectProperty`
var SearchBox = require('../static/js/functions');

If you wanna use ES6 syntax :

import React from 'react';
import {shalow} form 'enzyme'; // notice how we access object property `{objectProperty}` 
import SearchBox form '../static/js/functions';

also make sure at the end of your function.js file, you export the component with :

module.exports = SearchBox; // ES5 syntax
export default SearchBox; // ES6 syntax

answered Aug 3, 2016 at 11:10

Louis Barranqueiro

10.3k6 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moonjsit · Accepted Answer · 2016-08-02 09:32:18Z

0

You need to update Node (mocha is depending on node.js) version (to support es6 modules) or export your component using requireJS - module.exports ... + You should check what parts of es6 your node version supports, because code passed to mocha is not "babelized" :)

answered Aug 2, 2016 at 9:32

Moonjsit

6363 silver badges11 bronze badges

1 Comment

Moonjsit Over a year ago

Check: kangax.github.io/compat-table/es6 if you are not using unsupported parts of JS. Plus what are next and back (passed to onClick)? Are the defined anywhere?

Collectives™ on Stack Overflow

Unable to import Reactjs Class for testing with mocha and enzyme

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related