how to unit test react reduxsauce saga using jest and enzyme? - reactjs

Question

I am new to react and redux.
I am developing a project and for that I want to have redux, by using reduxsauce and redux-saga, but I am struggling to write unit tests for these.
Here is my folder structure:
My App-test.js:
import App from '../../../assets/src/App'
import React from 'react';
import renderer from 'react-test-renderer';
import configureStore from 'redux-mock-store'
import createStore from './Redux'
describe('App', () => {
const initialState = {output:100}
const mockStore = configureStore()
let store,container
const store = createStore()
beforeEach(()=>{
store = mockStore(initialState)
container = shallow(<App store={store} /> )
})
it('renders correctly', () => {
const rendered = renderer.create(
<App/>
);
expect(rendered.toJSON()).toMatchSnapshot();
});
});
Here is my App.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Index from './Screens/Index';
import { Provider } from 'react-redux'
import createStore from './Redux'
const store = createStore()
const rootElement = document.getElementById('subscription');
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<Index />
</Provider>
);
}
}
ReactDOM.render(<App />, rootElement);
I have tried with both the mockStore and store variable, but I am getting following error:
Any suggestions what could be wrong here?
Thanks
UPDATE 1
I muted the code now for shallow, and now my App-test.js file looks like this:
import App from '../../../assets/src/App'
import React from 'react';
import renderer from 'react-test-renderer';
import configureStore from 'redux-mock-store'
import createStore from './Redux'
describe('App', () => {
const initialState = {output:100}
const mockStore = configureStore()
let store,container
const store = createStore()
// beforeEach(()=>{
//// store = mockStore(initialState)
// container = shallow(<App store={store} /> )
// })
it('renders correctly', () => {
const rendered = renderer.create(
<App/>
);
expect(rendered.toJSON()).toMatchSnapshot();
});
});
But I get different error now:
UPDATE 2
After trying the solution as suggested by Rami Enbashi in the answer, the previous error (before UPDATE 1) again started appearing.

Answer 1

This seems to be a transpilation issue. You need to register Babel so that it will transpile ES6 to ES5 before you run unit tests. One way to do it is this.
In package.json add this jest config:
"jest": {
"setupTestFrameworkScriptFile": "./scripts/testsetup.js"
}
and in testsetup.js add this
require('babel-register')();
require("babel-polyfill");
require("babel-jest");
.....
Make sure you read Jest documentation for more config or needed plugins. And make sure you install them first.