CODEWITHSUNDEEP
reactjsjestjsenzyme
Samuel
Samuel

Reputation: 21

Jest and Enzyme with React: Mock method with Translate

I am doing some unit tests for a project I'm working on, and I have the following Modal on React. Note that I usually pass t for translation, which I am attempting to do in the test but it's working:

import React, { Component } from 'react'
import { Modal, Button } from 'react-bootstrap'
import {translate} from 'react-polyglot'

class MessageModal extends Component {
  render () {
    const {messageModal: {message, isOpen}, closeMessageModal, t} = this.props
    return (
      <Modal show={isOpen}>
        <Modal.Body>
          {message ? t(`MESSAGE_MODAL.${message}`) : ''}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={closeMessageModal}>Close</Button>
        </Modal.Footer>
      </Modal>
    )
  }
}

export default translate()(MessageModal)

and the following test:

import React from 'react'
import MessageModal from './MessageModal'
import { shallow } from 'enzyme'
import { shallowToJson } from 'enzyme-to-json'
// import {translate} from 'react-polyglot'

describe('Testing MessageModal', () => {
  const tree = shallow(
    <MessageModal t={jest.fn()} messageModal={{message: 'message', isOpen: true}}/>
  )
  it('Renders correctly', () => {
    expect(shallowToJson(tree.dive().setProps({t: jest.fn()}))).toMatchSnapshot()
  })
})

And I'm getting two main errors: TypeError: t is not a function and Warning: Failed context type: The context `t` is marked as required in `_translate`, but its value is `undefined`.

I have tried everything to get this solved but I wasn't able to make it work. If you could help me that'd be great.

Upvotes: 1

Views: 947

Answers (1)

flocks
flocks

Reputation: 218

What you could do is also exporting the not decorated MessageModal component.

import React, { Component } from 'react'
import { Modal, Button } from 'react-bootstrap'
import {translate} from 'react-polyglot'

export class MessageModal extends Component {
  render () {
    const {messageModal: {message, isOpen}, closeMessageModal, t} = this.props
    return (
      <Modal show={isOpen}>
        <Modal.Body>
          {message ? t(`MESSAGE_MODAL.${message}`) : ''}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={closeMessageModal}>Close</Button>
        </Modal.Footer>
      </Modal>
    )
  }
}

export default translate()(MessageModal)

This way you can import the not decorated component in your test so you don't have to deal with the higher order component part.

import { MessageModal } from './MessageModal'

Upvotes: 1

Related Questions