4

Mocha、Enzyme、Shallow レンダリングを使用しており、ReactJS をテストする予定です。私はbabelとES6を使用していません。ここでスタック オーバーフローに関する他の質問を見てきましたが、私の質問に答えたものはありません。

commonJS と Grunt で ES5 を使用して JSX を JS にコンパイルし、app.built.js ファイルを html ファイルにロードすると、すべてページに正常にロードされます。

これは私のコードですspeedoApp.jsx

var React = require('react');
var ReactDOM = require('react-dom');

module.exports.default = React.createClass({
  render: function() {
    return(<p>Hello</p>);
  }
});

これはコードですApp.js

var React = require('react');
var ReactDOM = require('react-dom');
var SpeedoApp = require('./speedoApp.jsx').default;

ReactDOM.render(
  <SpeedoApp />,
  document.getElementById('container')
)

私のHTMLファイル：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Speedometer</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="./scripts/app.built.js"></script>
  </body>
</html>

私のテストファイルspeedoSpec.js:

var React = require('react');
var expect = require('expect');
var enzyme = require('enzyme');
var shallow = enzyme.shallow;
var SpeedoApp = require('../../react_components/speedoApp.jsx');

describe('Component: speedoApp', function() {
  it('should display \'hello\' on the page', function() {
    var wrapper = shallow(<SpeedoApp />);
    expect(wrapper).to.have.length(1);
  });
});

mocha を実行すると、次のエラー メッセージが表示されます。

var wrapper = shallow(<SpeedoApp />);
                      ^
SyntaxError: Unexpected token <

app.built.jsのファイルの代わりにファイルをspeedoApp.jsx要求することも試みましたspeedoSpec.js。

誰が私が間違っているのか知っていますか?

4

0 に答える 0