CODEWITHSUNDEEP
reactjsjestjsenzyme
allrenders
allrenders

Reputation: 45

Jest and Enzyme testing React Component with ES6 Arrow functions

I have added Jest and Enzyme to my React project running webpack 2. Whilst running jest I have run into errors when using ES6 arrow functions within my React Component.

Example of Component code is below:

import React, { Component } from 'react';

class Add extends Component {
    constructor(props){
        super(props);
        this.state = this.defaultState();
    }

    defaultState = () => {
        return {
            name : ""
        }
    }
    onChange = (e) =>{
        this.setState({
            name: e.target.value
        });
    }
    handleAdd = (e) => {
        e.preventDefault();
        this.props.onAdd(this.state.name);
    }

    render= () => {
        return (
            <form>
        <!-- more markup -->
            </form>
        );
    }


}

export default Add;

Jest fails whilst running the test suites, do I need to add anything into my package json / babelrc to enable arrow functions testing?

Upvotes: 3

Views: 1721

Answers (1)

Max Millington
Max Millington

Reputation: 4498

Make sure you have babel-jest installed, and then in your bablerc you should have es2015, stage-0, and react in the presets

Upvotes: 6

Related Questions