React的Jasmine测试导致Webpack构建失败

时间:2015-07-04 20:00:40

标签: testing jasmine reactjs webpack

我正在建立一个简单的网站,用React展示故事。我已经制作了显示所有故事的第一页,所以我想设置我的第一个测试。我是测试React的新手,但是我已经对Jasmine做了一些工作,所以我使用Jasmine进行测试。我认为我已经正确设置了我的测试文件,但是当我尝试使用Webpack构建时,我收到以下错误:

mysqli_result Object
(
    [current_field] => 0
    [field_count] => 1
    [lengths] => 
    [num_rows] => 1
    [type] => 0
)

我的测试文件如下所示:

Module parse failed: /home/michael/repository/short-stories/test/karma_tests/story_test.js Line 14: Unexpected token <
You may need an appropriate loader to handle this file type.

我的Gruntfile.js中的webpack任务如下所示:

var React = require('react');
var Story = require('../../app/js/components/story.jsx');
var TestUtils = React.addons.TestUtils;

  describe('Story component', function () {

    afterEach(function () {
      if (component && TestUtils.isCompositeComponent(component) && component.isMounted()) {
        React.unmountComponentAtNode(component.getDOMNode().parent);
      }
    });

    beforeEach(function () {
      component = TestUtils.renderIntoDocument(<Story />);
      component.props.data.storyTitle = 'front end test title';
      component.props.data.author = 'front end author';
      component.props.data.storyText = 'front end story text';
    });

    it('should display a story', function () {
      expect(component.props.data.storyTitle).toBeDefined();
      expect(component.props.data.storyTitle).toBe('front end test title');
    });

  });

如果有更多信息可以帮助您找到解决方案,请告诉我。您可以在我的github repo上查看完整项目:https://github.com/mrbgit/short-stories/tree/react-tests

1 个答案:

答案 0 :(得分:1)

Webpack无法解析您的代码。您在JS文件中使用JSX语法。 renderIntoDocument采用React元素实例

component = TestUtils.renderIntoDocument(React.createElement('story'));