samedi 4 juillet 2015

Jasmine test for React causes Webpack build to fail

I am building a simple site to show stories with React. I have made the first page that shows all the stories, so I wanted to set up my first test. I am new to testing React, but I have done a bit with Jasmine, so I used Jasmine for my tests. I think that I've set up my test file right, but when I try to build with Webpack, I get the following error:

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.

My test file looks like this:

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

  });

My webpack task in my Gruntfile.js looks like this:

 webpack: {
      client: {
        entry: __dirname + '/app/js/client.jsx',
        output: {
          path: 'build/',
          file: 'bundle.js'
        },
        module: {
          loaders: [
          {
            test: /\.jsx$/,
            loader:'jsx-loader'
          }]
        }
      },
      test: {
        entry: __dirname + '/test/client/test.js',
        output: {
          path: 'test/client/',
          file: 'bundle.js'
        }
      },
      karma_test: {
        entry: __dirname + '/test/karma_tests/test_entry.js',
        output: {
          path: 'test/karma_tests/',
          file: 'bundle.js'
        }
      }
    },

Let me know if more info would help find a solution. You can view the full project on my github repo: http://ift.tt/1RYxjeQ

Aucun commentaire:

Enregistrer un commentaire