CODEWITHSUNDEEP
reactjsreduxreact-reduxjestjsredux-saga
Maverick
Maverick

Reputation: 2760

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

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: enter image description here

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:

enter image description here

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:

enter image description here

UPDATE 2

After trying the solution as suggested by Rami Enbashi in the answer, the previous error (before UPDATE 1) again started appearing.

Upvotes: 0

Views: 651

Answers (1)

Rami Enbashi
Rami Enbashi

Reputation: 3556

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.

Upvotes: 1

Related Questions