无法导入 Reactjs 类以使用 mocha 和酶进行测试

Posted 2023-03-08

【中文标题】无法导入 Reactjs 类以使用 mocha 和酶进行测试

【英文标题】：Unable to import Reactjs Class for testing with mocha and enzyme

【发布时间】：2016-12-07 13:05:06

【问题描述】：

我的测试文件代码是：

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);
  );
);

这是我在 functions.js 中的 React 类

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>
    )
  
);

它工作正常，但我想编写测试，当我运行它时，它会输出以下错误：

irtza@irtza-Lenovo-G50-70:~/Desktop/Kamal Hasan/pedialink$ mocha ./js_test/*.js /home/irtza/Desktop/Kamal Hasan/pedialink/static/js/functions.js:39 , ^ 语法错误：意外的标记 在 Module._compile (module.js:511:25) 在 Object.Module._extensions..js (module.js:550:10) 在 Module.load (module.js:456:32) 在 tryModuleLoad (module.js:415:12) 在 Function.Module._load (module.js:407:3) 在 Module.require (module.js:466:17) 在需要（内部/module.js:20:19） 在对象。 （/home/irtza/Desktop/Kamal Hasan/pedialink/js_test/test.js:3:19） 在 Module._compile (module.js:541:32) 在 Object.Module._extensions..js (module.js:550:10) 在 Module.load (module.js:456:32) 在 tryModuleLoad (module.js:415:12) 在 Function.Module._load (module.js:407:3) 在 Module.require (module.js:466:17) 在需要（内部/module.js:20:19） 在 /usr/local/lib/node_modules/mocha/lib/mocha.js:220:27 在 Array.forEach （本机） 在 Mocha.loadFiles (/usr/local/lib/node_modules/mocha/lib/mocha.js:217:14) 在 Mocha.run (/usr/local/lib/node_modules/mocha/lib/mocha.js:485:10) 在对象。 (/usr/local/lib/node_modules/mocha/bin/_mocha:405:18) 在 Module._compile (module.js:541:32) 在 Object.Module._extensions..js (module.js:550:10) 在 Module.load (module.js:456:32) 在 tryModuleLoad (module.js:415:12) 在 Function.Module._load (module.js:407:3) 在 Function.Module.runMain (module.js:575:10) 启动时 (node.js:159:18) 在 node.js:444:3

【参考方案1】：

您的代码是 ES5 和 ES6 语法的混合体。

我认为问题出在这部分代码：

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

如果你想使用 ES5 语法：

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

如果你想使用 ES6 语法：

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

还要确保在 function.js 文件的末尾，使用 :

导出组件

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

【参考方案2】：

您需要更新 Node（mocha 取决于 node.js）版本（以支持 es6 模块）或使用 requireJS - module.exports 导出您的组件 ... + 您应该检查您的 node 版本支持的 es6 的哪些部分，因为传递给 mocha 的代码不是“babelized” :)

【讨论】：

检查：kangax.github.io/compat-table/es6 如果您没有使用 JS 的不受支持的部分。再加上什么是下一步和返回（传递给 onClick）？定义在任何地方吗？