相关疑难解决方法(0)

将react-intl对象注入已安装的酶组件中进行测试

编辑:解决了!向下滚动以查找答案


在我们的组件测试中,我们需要他们可以访问react-intl上下文.问题是我们在mount()没有<IntlProvider />父包装的情况下安装单个组件(使用Enzyme ).这可以通过将提供程序包装起来然后将root点指向IntlProvider实例来解决,而不是CustomComponent.

测试与阵营-国际:酶文档仍然是空的.

<CustomComponent />

class CustomComponent extends Component {
  state = {
    foo: 'bar'
  }

  render() {
    return (
      <div>
        <FormattedMessage id="world.hello" defaultMessage="Hello World!" />
      </div>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

标准测试案例(所需)(酶+摩卡+柴)

// This is how we mount components normally with Enzyme
const wrapper = mount(
  <CustomComponent
    params={params}
  />
);

expect( wrapper.state('foo') ).to.equal('bar');
Run Code Online (Sandbox Code Playgroud)

但是,由于我们的组件FormattedMessage用作react-intl库的一部分,因此在运行上述代码时会出现此错误:

Uncaught Invariant Violation: [React Intl] …

reactjs enzyme react-intl

20
推荐指数
1
解决办法
1万
查看次数

标签 统计

enzyme ×1

react-intl ×1

reactjs ×1