Javascript 如何在react.js的jest测试中触发Pubsub.js事件

我正在使用库在react应用程序中实现国际化。该语言可以在不同的组件中触发，因此每次更改语言时，我都使用该库发布一个事件，并在我的中央应用程序组件中订阅该事件，然后在整个应用程序中切换显示的区域设置和消息

我的问题涉及使用和编写测试，这些测试将触发语言更改，并使用该语言更新我的应用程序组件，因此我可以断言处理区域设置的状态变量已正确更新。是否有可能触发这样的事件，或者我在这里走错了路？我的代码列在下面

//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');
  });
});

//应用程序组件的相关部分
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.localeStore=新的localeStore（）；
此.state={
区域设置：this.localeStore.locale（），
消息：this.localeStore.messages（）
};
}
componentDidMount（）{
订阅（LocaleEvent.change，（事件，区域设置）=>{
this.setState（{locale:locale.code，messages:locale.messages}）
});
}
组件将卸载（）{
PubSub.unsubscribe（LocaleEvent.change）；
}
render（）{
返回(
...
);
}
}
//App.test.js
描述（'App'，（）=>{
它（'渲染而不崩溃'，（）=>{
const div=document.createElement（'div'）；
mount（）；
});
//此测试失败，因为事件未发布且状态未更改
它（'触发语言更改事件时正确切换语言'，（）=>{
让app=mount（）；
publish（'locale.change'，{code:'en'，messages:{}）；
expect（app.state（）.locale）.toEqual（'en'）；
});
});

因此您必须像这样模拟

'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()
  });
});

从“PubSub js”导入PubSub
jest.mock（'pubsub-js'，（）=>({
订阅：（e，fn）=>fn（{}，{code:'de'，messages:'someMessages'}），
取消订阅：jest.fn（）
}))
描述（'App'，（）=>{
它（'触发语言更改事件时正确切换语言'，（）=>{
常量app=mount（）
expect（app.state（）.locale）.toEqual（'de'）；
app.unmount（）
expect（PubSub.unsubscribe）.toHaveBeenCalled（）
});
});

是将

PubSub

组件导入到您的模块中，还是来自全局名称空间？顺便说一下，这听起来像是ReduxIt的主要候选组件导入到使用它的组件中。好吧，那么我将模拟导入，将为此编写一个答案。尝试此解决方案时，我遇到以下错误：ReferenceError:PubSub未定义。如何在组件中导入它？如上所述：

从“PubSub js”导入PubSub。但是奇怪的是，当它对您的组件起作用时，您怎么会得到错误呢。你能移除模拟并看看会发生什么吗？请注意前面的错误，我一定是遗漏了什么。我现在收到以下错误：TypeError:无法读取未定义的属性“code”