React - Enzyme mount throwing regeneratorRuntime is not defined error

Question

I am trying to test the following component:

class SearchComp extends Component {
        
    constructor(props){
                
        super(props);
        this.state = {   
            data: [],
             filter: {
                    category: {
                        value: null
                    },
                    rating: {
                        value: null
                    },
                    year: {
                        value: null
                    }
                },              
            years:['2000','2001','All']
        }
    }
    
    async componentDidMount() {
          var x = null; 
          await API.service()
          .then(response => {                 
            x = response;
          })
          .catch(e => {
              ...                            
          });
          this.setState({state: x});
    }
    
    handleFilters(e){
        var filter = {...this.state.filter}
        if (e.target.value === 'All'){
                filter.year.value = 'All';              
            }
            else {
                filter.year.value = e.target.value;
            }           
        this.setState({filter})
    }
    
    render(){
        

        
    return(
                <select id="comp1" class="xyz" onChange={this.handleFilters}>
                    <option value="Newest">Newest</option>  
                    <option value="Oldest">Oldest</option>
                </select>
                                        
                <select id="comp2" value={this.state.years} onChange={this.handleFilters}>
                    {this.state.years}
                </select>
    )

}
}

const mapStateToProps = (state => {
    return {
        idx_msp: state.reducer.idx_rdc
    };
}); 

export default connect(mapStateToProps, null) (SearchComp);

Here is the test:

import SearchComp from '../src/SearchComp.js';
import { shallow, mount } from 'enzyme'
import expect from 'expect'
import React from 'react'
import {Provider} from 'react-redux';
import {connect} from "react-redux";
import rootReducer from '../src/reducers/RootReducer.js'
import {createStore} from 'redux';

describe('SearchComp test suite', () => {
        
    it("test1", done => {
        const store = createStore(
        rootReducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
        );
        

        const wrapper =  mount( <Provider store={store}>< SearchComp /></Provider> );

    });
});

The test is erroring out at this line in the component:

this.setState({filter})

Error thrown:

 ReferenceError: regeneratorRuntime is not defined

I have tried most of the solutions provided here:Babel 6 regeneratorRuntime is not defined, but nothing works.

Answer 1

regeneratorRuntime is not defined is not actually an error from enzyme. That's an error from transformed with babel code (in your case, I suppose, babel is used from jest or other unit tests runner).

Such in very similar cases of that babel error, you need to install babel dependencies that provide regenerationRuntime:

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

and specify them in .babelrc.json file:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}