Jest und Enzym mit React: Mock-Methode mit Translate

Question

Ich mache einige Komponententests für ein Projekt, an dem ich arbeite, und ich habe das folgende Modal auf React. Beachten Sie, dass ich pass t in der Regel für die Übersetzung, die ich in dem Test zu tun bin versucht, aber es funktioniert:

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) 

und dem folgenden 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() 
    }) 
}) 

Und ich bin immer zwei Hauptfehler: TypeError: t is not a function und Warning: Failed context type: The context `t` is marked as required in `_translate`, but its value is `undefined`.

ich alles versucht haben, dieses Problem gelöst zu bekommen, aber ich war nicht in der Lage Arbeit zu machen. Wenn du mir helfen könntest, wäre das großartig.

Answer 1

Sie können auch die nicht dekorierte MessageModal-Komponente exportieren.

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) 

Auf diese Weise können Sie die nicht dekorierte Komponente in Ihren Test importieren, so dass Sie sich nicht mit der Komponente höherer Ordnung beschäftigen müssen.

import { MessageModal } from './MessageModal'