Wie babel Plugin im Jest-Test zu verspotten?

Question

Ich benutze ein Babel-Plugin, das eine Funktion namens myHelper bietet, die innerhalb einer Komponente, die ich testen möchte, verwendet wird (aber nicht importiert, da es als Babel-Plugin bereitgestellt wird).

Wie mache ich "global" mit mit Jest?

Answer 1

Es könnte eine schlechte Art und Weise sein, es ist möglich, global zu machen.

// myHelper.js 
function myHelper(){ 
    return work() // expected 1 
} 
if (global) { 
    global.myHelperFunction = myHelper; 
} 

// myHelper.test.js 
test('TEST MY HELPER',() => { 
    expect(global.myHelperFunction()).toBe(1); 
}) 

Answer 2

Ich sehe zwei Richtungen, wo yo gehen könnte: - die Helfer global zur Verfügung stellen und testen, wie Sie Ihren Code mit ihm interagiert - der Helfer durch einen babel-jest zur Verfügung stellen und Ihre Tests schreiben entsprechend

Die Die erste kann mit dem Feld setupFiles in der jest-Konfiguration erreicht werden: Sie können ein Array von Skripten angeben, die ausgeführt werden sollen, bevor Ihre Tests ausgeführt werden. Sie können Ihren Helper global in einer davon erstellen.

Die zweite kann durch Angabe einer transform in der jest config erreicht werden. So etwas wie

"transform": { 
    "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest" 
} 

Fühlen Sie sich frei zu äußern, wenn Ihre Anfrage präziser ist.

Answer 3

Ich würde diese Komponenten akzeptieren eine myHelper Eigenschaft, um optional myHelper Methode von Babel zur Verfügung gestellt. Standardmäßig würde die Eigenschaft auf die ursprünglichen myHelper Methode zeigen:

class MyComponent extends Component { 
    constructor() { 
     // Use myHelper function like: 
     this.props.myHelper(); 
    } 

    return (
    <div>...</div> 
); 
} 

MyComponent.propTypes = { 
    myHelper: PropTypes.func.isRequired, 
}; 

MyComponent.defaultProps = { 
    // set by default to babel-provided method 
    myHelper: myHelper, 
}; 

..und dass in Ihren Tests unter Verwendung von zum Beispiel enzyme:

const myHelperMock = jest.fn(); 
const wrapper = shallow(
    <MyComponent 
     myHelper={myHelperMock} 
    /> 
);