Wie machst du manuell eine deiner eigenen Dateien in Jest?

Question

Ich versuche, ein Objekt (das ich erstellt habe) in Jest zu verspotten, so dass ich Standardverhalten innerhalb der Reaktionskomponente bereitstellen kann (also wird die echte Implementierung nicht verwendet)

Dies ist meine Reaktionskomponente ChatApp (es ist sehr straight forward)

'use strict'; 
var React, ChatApp, ChatPanel, i18n; 

React = require('react'); 
ChatPanel = require('./chat_panel'); 
i18n = require('../support/i18n'); 

ChatApp = React.createClass({ 
    render() { 
    return (
     <div className="chat-app"> 
     <h1>{i18n.t("app.title")}</h1> 
     <ChatPanel /> 
     </div> 
    ); 
    } 
}); 

module.exports = ChatApp; 

So habe ich eine benutzerdefinierte I18n Abhängigkeit, die Übersetzungen tut (I18n ist etwas, was ich geschrieben habe, dass ein Wrapper für Knoten-polyglott ist).

Also ich möchte einen grundlegenden Test durchführen, um zu sehen, ob das H1 das richtige Wort darin hat, aber ich möchte jest.dontMock() auf meinem I18n-Objekt nicht setzen, weil ich es nicht will Verwenden Sie das echte Objekt im ChatApp-Test.

im Anschluss an die grundlegenden Anweisungen Also auf der Scherz Website, habe ich ein spottet Ordner und ein Mock-Datei für i18n erstellt, die ein Modell aus dem ursprünglichen Objekt erzeugt und dann überschreibt die t-Methode und fügt eine Methode, mir zu erlauben um den Rückgabewert für t zu setzen.

Dies ist das Mock-Objekt

'use strict'; 
var i18nMock, _returnString; 

i18nMock = jest.genMockFromModule('../scripts/support/i18n'); 

_returnString = ""; 

function __setReturnString(string) { 
    _returnString = string; 
} 

function t(key, options = null) { 
    return _returnString; 
} 

i18nMock.t.mockImplementation(t); 
i18nMock.__setReturnString = __setReturnString; 

module.exports = i18nMock; 

Jetzt in meinem ChatApp Test ich das Mock in einem erfordern, bevor jedem, etwa so:

'use strict'; 
var React, ChatApp, TestUtils, path; 

path = '../../../scripts/components/'; 
jest.dontMock(path + 'chat_app'); 

React = require('react/addons'); 
ChatApp = require(path + 'chat_app'); 
TestUtils = React.addons.TestUtils; 

describe('ChatApp',() => { 
    beforeEach(() => { 
    require('i18n').__setReturnString('Chat App'); 
    }); 

    var ChatAppElement = TestUtils.renderIntoDocument(<ChatApp />); 

    it('renders a title on the page',() => { 
    var title = TestUtils.findRenderedDOMComponentWithTag(ChatAppElement, 'h1'); 
    expect(title.tagName).toEqual('H1'); 
    expect(title.props.children).toEqual('Chat App'); 
    }); 
}); 

Wenn ich das i18n Objekt innerhalb der console.log test dann bekomme ich das korrekte mocked object, der __setReturnString wird auch ausgelöst (als ob ich in der Nachricht console.log in dieser Nachricht das Log sehe).

Wenn ich jedoch das i18n-Objekt innerhalb der eigentlichen React-Komponente console.log anlog, erhält es einen Jest-Spott, aber es bekommt meinen Jest-Spott nicht, also ist die t-Methode eine leere Methode, die nichts tut. was bedeutet, dass der Test fehlschlägt.

Irgendwelche Ideen, was ich falsch mache?

Vielen Dank

Answer 1

Jest funktioniert die automatische spöttisch. Nur i18n = require('../support/i18n') sollte genug sein. Deshalb müssen Sie normalerweise zuerst jest.dontMock anrufen.

können Sie weitere Informationen finden Sie hier: https://facebook.github.io/jest/docs/automatic-mocking.html

Answer 2

ich auch Mühe, die __mocks__ Ordner arbeiten hatte. Die Art, wie ich es geschafft habe, ist die Methode.

In Ihrem Fall würden Sie jest.setMock('../../../scripts/i18n/', require('../__mocks__/i18n');

Offensichtlich bin ich nicht sicher, der Standort Ihres Mock und die Lage der realen Bibliothek Sie verwenden, aber der erste Parameter den Pfad verwenden sollten, Ihre echte Modul wird gespeichert und der zweite sollte den Pfad verwenden, in dem der Schein gespeichert ist.

Dies sollte Ihr Modul und alle Module, die Sie benötigen (einschließlich React), zwingen, Ihr manuell verspottetes i18n-Modul zu verwenden.

Answer 3

Was mattykuzyk in his answer erwähnt habe gar nicht für mich arbeiten :(

Doch was fand ich heraus, schien das Problem zu sein für mich der Aufbau Scherz war: Ich habe moduleNameMapper am Anfang, und für aus irgendeinem Grund dieser nie verspottet werden ...

für mich Also der erste Schritt war, anstatt zu meinen Modulnamen zugeordnet Ordner in die moduleDirectories zu bewegen, etwas zu bekommen.

Danach zu arbeiten, konnte ich einfach ein __mocks__ hinzufügen Datei neben dem eigentlichen Implementierung (in meinem Fall utils/translation.js und utils/__mocks__/translation.js). Da mein translations.js Standard eine Übersetzungsfunktion exportiert, habe ich auch standardmäßig meinen Mock exportiert. Die gesamte __mocks__/translations.js ist super einfach und sieht wie folgt aus:

export default jest.fn((key, unwrap = false) => (
 
    unwrap && `${key}-unwrapped` || `${key}-wrapped` 
 
))

Obwohl ich es nicht getestet haben, das Hinzufügen einer __setReturnString leicht genug sein sollte, für mich ist es ausreichend war, um tatsächlich meine Übersetzung zurückkehren Schlüssel. Hoffe das hilft!