Problem with imports in tests

[metr1ckzu]

Hi, i'm not any good in creating issues and probably i'm doing it wrong and wrong place. But i'm trying 3rd day in a row and have no other options. Can't understand what is wrong and help will be appreciated.

I have contianer:

import {connect} from 'react-redux';
import { addTodoRequest } from 'store/actions';
import { AddTodo } from 'components'

export const mapDispatchToProps = {
  addTodo: addTodoRequest
}

export default connect(null, mapDispatchToProps)(AddTodo)

And test for it

import {mapDispatchToProps} from '../AddTodoContainer';
import { addTodoRequest } from 'store/actions';

describe('AddTodoContainer tests', () => {
  it('mapDispatchToProps test', () => {
    expect(mapDispatchToProps).toEqual({addTodo: addTodoRequest})
  })
})

● AddTodoContainer tests › mapDispatchToProps test

    TypeError: iterator.next is not a function

      at printIteratorEntries (node_modules/pretty-format/build/collections.js:170:183)
      at printImmutableEntries (node_modules/pretty-format/build/plugins/immutable.js:44:39)
      at Object.<anonymous>.exports.serialize (node_modules/pretty-format/build/plugins/immutable.js:179:12)
      at printPlugin (node_modules/pretty-format/build/index.js:245:10)
      at printer (node_modules/pretty-format/build/index.js:290:12)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:180:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:232:42)
      at prettyFormat (node_modules/pretty-format/build/index.js:446:10)
      at pass (node_modules/expect/build/matchers.js:429:49)
      at getMessage (node_modules/expect/build/index.js:107:16)
      at Object.throwingMatcher [as toEqual] (node_modules/expect/build/index.js:215:23)
      at Object.<anonymous> (src/containers/__tests__/AddTodoContainer.test.js:6:50)

[diegohaz]

I'm not used to test containers and I have no idea of what's happening from the logs. It seems to be an error from expect, but not sure.

Anyway, the way you are creating containers could lead to problems (and perhaps it's the cause of your current problem). Please, take a look on this: https://github.com/diegohaz/arc/issues/131#issuecomment-283296269

[metr1ckzu]

@diegohaz I'm kinda new to all this stuff, but i like shorthand syntax in mapDispatchToProps. Maybe it leads to problems but i didn't noticed any one yet. If i will then i would consider to use another approach. But still it's not a case at the moment.

I made changes to mapDispatchToProps

export const mapDispatchToProps = (dispatch) => ({
  addTodoRequest: (text) => dispatch(addTodoRequest(text))
})

And changed test:

import {mapDispatchToProps} from '../AddTodoContainer';  

it('mapDispatchToProps test', () => {
    const text = 'test'
    const dispatchSpy = jest.fn()
    mapDispatchToProps(dispatchSpy).addTodoRequest(text)
    expect(dispatchSpy.mock.calls).toEqual( [ [ { type: 'DEFAULT_ADD_TODO_REQUEST' } ] ])
  })

But still encountered an error:

 FAIL  src/containers/__tests__/AddTodoContainer.test.js
  ● mapDispatchToProps test

    TypeError: (0 , _actions.addTodoRequest) is not a function

      at Object.addTodoRequest (src/containers/AddTodoContainer.js:10:219)
      at Object.<anonymous> (src/containers/__tests__/AddTodoContainer.test.js:16:60)

Only changing ActionsMock.js made difference:

module.exports = actions.default

And then test passes. Also jest coverage makes warning about actionsMock (before and after small 'fix')

Maybe is there a way to enable default import in tests?

ps. I don't know how mapDispatchToProps can be wrapped like in your comment you've linked. pss. Maybe my repo will help https://github.com/metr1ckzu/todo-arc-redux-ssr

[diegohaz]

I didn't wrap mapDispatchToProps, but the component itself.