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

IT技术 reactjs enzyme react-intl
2021-05-11 14:33:37

编辑：解决了！向下滚动查看答案

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

该测试与阵营-国际：酶文档仍然是空的。

<自定义组件/>

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

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

标准测试用例（所需）（酶+摩卡+柴）

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

expect( wrapper.state('foo') ).to.equal('bar');

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

Uncaught Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

用它包裹 IntlProvider

const wrapper = mount(
  <IntlProvider locale="en">
    <CustomComponent
      params={params}
    />
  </IntlProvider>
);

这提供CustomComponent了intl它要求的上下文。但是，在尝试进行诸如此类的测试断言时：

expect( wrapper.state('foo') ).to.equal('bar');

引发以下异常：

AssertionError: expected undefined to equal ''

这当然是因为它试图读取状态IntlProvider而不是我们的CustomComponent.

尝试访问 CustomComponent

我已经尝试了以下无济于事：

const wrapper = mount(
  <IntlProvider locale="en">
    <CustomComponent
      params={params}
    />
  </IntlProvider>
);


// Below cases have all individually been tried to call `.state('foo')` on:
// expect( component.state('foo') ).to.equal('bar');

const component = wrapper.childAt(0); 
> Error: ReactWrapper::state() can only be called on the root

const component = wrapper.children();
> Error: ReactWrapper::state() can only be called on the root

const component = wrapper.children();
component.root = component;
> TypeError: Cannot read property 'getInstance' of null

现在的问题是：我们如何才能安装CustomComponent使用intl方面，同时仍然能够执行我们的“根”的操作CustomComponent？

1个回答

我创建了一个辅助函数来修补现有的酶mount()和shallow()函数。我们现在在所有使用 React Intl 组件的测试中都使用这些辅助方法。

你可以在这里找到要点：https : //gist.github.com/mirague/c05f4da0d781a9b339b501f1d5d33c37

为了保持数据的可访问性，这里的代码简而言之：

助手/国际测试.js

/**
 * Components using the react-intl module require access to the intl context.
 * This is not available when mounting single components in Enzyme.
 * These helper functions aim to address that and wrap a valid,
 * English-locale intl context around them.
 */

import React from 'react';
import { IntlProvider, intlShape } from 'react-intl';
import { mount, shallow } from 'enzyme';

const messages = require('../locales/en'); // en.json
const intlProvider = new IntlProvider({ locale: 'en', messages }, {});
const { intl } = intlProvider.getChildContext();

/**
 * When using React-Intl `injectIntl` on components, props.intl is required.
 */
function nodeWithIntlProp(node) {
  return React.cloneElement(node, { intl });
}

export default {
  shallowWithIntl(node) {
    return shallow(nodeWithIntlProp(node), { context: { intl } });
  },

  mountWithIntl(node) {
    return mount(nodeWithIntlProp(node), {
      context: { intl },
      childContextTypes: { intl: intlShape }
    });
  }
};

自定义组件

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

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

自定义组件测试.js

import { mountWithIntl } from 'helpers/intl-test';

const wrapper = mountWithIntl(
  <CustomComponent />
);

expect(wrapper.state('foo')).to.equal('bar'); // OK
expect(wrapper.text()).to.equal('Hello World!'); // OK
其它你可能感兴趣的问题
上一篇React 功能组件的功能或粗箭头？ 下一篇react this.props.params 未定义