Как да задействам Pubsub.js събитие в тест за шега за react.js

Внедрявам интернационализация в приложение за реакция с библиотеката react-intl. Езикът може да бъде задействан в различни компоненти, така че използвах библиотеката pubsub-js, за да публикувам всяко събитие когато езикът се промени, и се абонирайте за това събитие в моя централен компонент на приложението, който след това превключва локала и съобщенията, които се показват в цялото приложение.

Въпросът ми се отнася до писането на тестове с jest и ензим, който ще задейства промяната на езика и ще накара компонента на приложението ми да се актуализира с езика, така че мога да твърдя, че променливите на състоянието, занимаващи се с локала, са правилно актуализирани. Възможно ли е да се задействат такива събития или съм на грешен път тук? Моят код е посочен по-долу

//Relevant parts of the app component


class App extends Component {
  constructor(props) {
    super(props);
    this.localeStore = new LocaleStore();
    this.state = {
      locale: this.localeStore.locale(),
      messages: this.localeStore.messages()
    };
  }

  componentDidMount() {
    PubSub.subscribe(LocaleEvent.change, (event, locale) => {
      this.setState({locale: locale.code, messages: locale.messages})
    });
  }

  componentWillUnmount() {
    PubSub.unsubscribe(LocaleEvent.change);
  }

  render() {
    return (
      <IntlProvider key={ this.state.locale } locale={ this.state.locale } messages={ this.state.messages }>
        <div>
          ...
        </div>
      </IntlProvider>
    );
  }
}

// App.test.js

describe('App', () => {
  it('renders without crashing', () => {
    const div = document.createElement('div');
    mount(<App />);
  });

  // This test fails, because the event is not published and the state does not change
  it('correctly switches the language when the language change event is triggered', () => {
    let app = mount(<App />);

    PubSub.publish('locale.change', {code: 'en', messages: {}});

    expect(app.state().locale).toEqual('en');
  });
});

person Awemo    schedule 17.05.2017    source източник
comment
Компонентът PubSub импортиран ли е във вашия модул или идва от глобалното пространство на имена?   -  person Andreas Köberle    schedule 17.05.2017
comment
Като настрана, това звучи като основен кандидат за Redux   -  person Patrick    schedule 17.05.2017
comment
Той се импортира в компонентите, които го използват.   -  person Awemo    schedule 17.05.2017
comment
Добре, тогава просто ще се подигравам на импортирането, ще напиша отговор за това.   -  person Andreas Köberle    schedule 17.05.2017


Отговори (1)


Така че трябва да се подиграете на модула 'pubsub-js' така:

import PubSub from 'pubsub-js'

jest.mock('pubsub-js', ()=>({
  subscribe:(e, fn) => fn({}, {code: 'de', messages:'someMessages'}),
  unsubscribe: jest.fn()
}))

describe('App', () => {

  it('correctly switches the language when the language change event is triggered', () => {
    const app = mount(<App />)
    expect(app.state().locale).toEqual('de');
    app.unmount()
    expect(PubSub.unsubscribe).toHaveBeenCalled()
  });
});
person Andreas Köberle    schedule 17.05.2017
comment
Получавам следната грешка, когато опитам това решение: ReferenceError: PubSub не е дефиниран. - person Awemo; 18.05.2017
comment
Как го импортирате във вашия компонент? - person Andreas Köberle; 18.05.2017
comment
Както направихте по-горе: import PubSub from 'pubsub-js';. - person Awemo; 18.05.2017
comment
Но как тогава да получите грешка, когато работи за вашия компонент, странно. Можете ли да премахнете макета и да видите какво се случва? - person Andreas Köberle; 18.05.2017
comment
Задраскайте по-ранната грешка, трябва да съм пропуснал нещо. Сега получавам следната грешка: TypeError: Cannot read property 'code' of undefined - person Awemo; 18.05.2017
comment
Ahrg, има малък бъг в моя пример, който ще го поправи. - person Andreas Köberle; 18.05.2017