Jak ręcznie kpić sobie z jednego ze swoich plików w ramach żartu?
Próbuję mockować obiekt (który stworzyłem) jako żart, aby zapewnić domyślne zachowanie w komponencie reagującym (więc nie jest używana żadna rzeczywista implementacja)
To jest mój składnik reagowania na ChatApp (jest bardzo prosty)
'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">
[b]{i18n.t("app.title")}[/b]>
<ChatPanel/>
);
}
});module.exports = ChatApp;
Mam więc niestandardową zależność I18n, która wykonuje tłumaczenia (napisałem I18n, który jest opakowaniem dla node-polyglot).
Więc chcę zrobić podstawowy test, aby sprawdzić, czy H1 ma prawidłowe słowo, ale nie chcę ustawiać jest.dontMock () na moim obiekcie I18n, ponieważ nie chcę, aby używał prawdziwego obiektu w teście ChatApp .
Więc postępując zgodnie z podstawowymi instrukcjami na stronie jest, utworzyłem folder
mocks
i utworzyłem pozorowany plik dla i18n, który generuje makietę z oryginalnego obiektu, a następnie zastępuje metodę t i dodaje metodę, która pozwala mi ustawić zwracany ciąg dla t.
To jest układ obiektu
'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;
Teraz w moim teście ChatApp wymagam układu przed każdym z nich, na przykład:
'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');
});
});
Jeśli w teście console.log obiekt i18n, to otrzymam poprawny obiekt do mockowania, a następnie _ _ setReturnString również odpala (tak jakbym był console.log w tym poście, aby zobaczyć dziennik).
Jednakże, jeśli console.loguje obiekt i18n wewnątrz rzeczywistego komponentu Reacta, to pobiera on układ żartu, ale nie otrzymuje układu żartu, więc metoda t jest pustą metodą, która nic nie robi, co oznacza, że test kończy się niepowodzeniem.
Jakieś pomysły, co robię źle?
Wielkie dzięki
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
3 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
W twoim przypadku Oczywiście nie jestem pewien lokalizacji twojego układu i lokalizacji rzeczywistej biblioteki, której używasz, ale pierwszym parametrem jest użycie ścieżki, w której jest przechowywany twój prawdziwy moduł, a drugim jest ścieżka, w której jest przechowywany twój układ.
Powinno to zmusić twój moduł i wszystkie wymagane moduły (w tym React) do korzystania z ręcznie mockowanego modułu i18n.
Anonimowy użytkownik
Potwierdzenie od:
Więcej szczegółów znajdziesz tutaj:
https://facebook.github.io/jok ... .html
https://facebook.github.io/jes ... .html
Anonimowy użytkownik
Potwierdzenie od:
muzyka matty
https://stackoverflow.com/users/2073211/mattykuzyk
wspomina w
Twoja odpowiedź
https://stackoverflow.com/a/29805544/3340229, w ogóle mi nie działało :(
Jednak to, co znalazłem, wydawało mi się problemem, było dla mnie żartem: użyłem na samym początku iz jakiegoś powodu nigdy nie byli wyśmiewani ...
Więc dla mnie pierwszym krokiem było przeniesienie folderu z wyświetlaną nazwą modułu do , aby cokolwiek działało.
Potem mogłem po prostu dodać plik obok aktualnej implementacji (w moim przypadku i ).
Ponieważ mój plik domyślnie eksportuje funkcję tłumaczenia, domyślnie wyeksportowałem również mój układ. Cały jest super prosty i wygląda tak:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
Chociaż jeszcze tego nie testowałem, dodanie powinno być dość proste, wystarczyło mi, żebym faktycznie odzyskał klucz tłumaczenia. Mam nadzieję że to pomoże!