Question

Google Analytics（分析）已添加到ReactJS的组件中，并且由于在测试时会出现未定义的错误，因此如何进行测试。

render() {
return (
  <div className='form-wrapper'>
    <h2 className='register-form-title'>{global.i18n.t('great_offers.title')}</h2>
    <OTPForm
      otpChange={this._otpChange}
      errorMessage={this.state.error}
      handleSubmit={this._handleSubmit}
      valid={this.state.valid}
    />
  </div>
);
  }

在上面的代码中进行单元测试时，它说“无法读取未定义的属性t”。因此，有什么方法可以将其初始化为开始时的内容。而且global.i18n.t不是有效的变量名。在JS中，所以我也无法对其进行初始化。

Answer 1

Jest提供了一个global对象，该对象可用于设置单元测试的全局变量。这是一个示例：

此组件：

import * as React from 'react';

export default ()=> {
  return (
    <div>
      <h2>{global.i18n.t('string_id')}</h2>
    </div>
  );
}

..可以像这样测试：

import * as React from 'react';
import { shallow } from 'enzyme';

import Component from './component';

// create global i18n object containing a spy as t()
global.i18n = {
  t: jest.fn((key) => 'global.18n.t() called with ' + key)
}

describe('Component', () => {

  it('should render and call global.i18n.t()', () => {
    expect(shallow(<Component />)).toMatchSnapshot();
    expect(global.i18n.t).toHaveBeenCalledTimes(1);
    expect(global.i18n.t).toHaveBeenCalledWith('string_id');
  });

});

...生成此快照：

exports[`Component should render and call global.i18n.t() 1`] = `
<div>
  <h2>
    global.18n.t() called with string_id
  </h2>
</div>
`;

请注意，快照测试使用的是enzyme和enzyme-to-json，它们会生成格式正确的快照。

如何测试global.i18n.t

1 个答案: