如何测试取决于本地化笑话、酶的值？答案

【问题标题】：How to test values which depends on localization jest, enzyme?如何测试取决于本地化笑话、酶的值？
【发布时间】：2020-05-27 11:49:43
【问题描述】：

如何测试可能依赖于当前本地化的值？

function DateNavigation({ locale, date }) {
  return (locale === 'en')
    ? <span>{moment(date).format('DD.MM.YYYY')}</span>
    : <span>{moment(date).format('YYYY.MM.DD')}</span>
}

此测试有时因位置而无法运行

it('display date correctly', () => {
    const component = mount(<DateNavigation date={'2022-01-31'} />);

    expect(component.html()).toEqual("<span>31.01.2022</span>");
});

【问题讨论】：

标签： javascript reactjs jestjs momentjs enzyme

【解决方案1】：

您可以使用jest.mock(moduleName, factory, options) 模拟moment()、moment().format() 函数及其返回值。测试结果必须是可预测的。对于date的测试，我们需要让测试用例在不同的系统、时区和本地化下返回一定的值。

例如

DateNavigation.jsx:

import React from 'react';
import moment from 'moment';

function DateNavigation({ locale, date }) {
  return locale === 'en' ? (
    <span>{moment(date).format('DD.MM.YYYY')}</span>
  ) : (
    <span>{moment(date).format('YYYY.MM.DD')}</span>
  );
}

export default DateNavigation;

DateNavigation.test.jsx:

import DateNavigation from './DateNavigation';
import moment from 'moment';

jest.mock('moment', () => {
  const mMoment = { format: jest.fn() };
  return jest.fn(() => mMoment);
});

describe('62042433', () => {
  it('display date correctly', () => {
    const date = '31.01.2022';
    moment().format.mockReturnValueOnce(date);
    const component = mount(<DateNavigation date={'2022-01-31'} locale={'en'} />);
    expect(component.html()).toEqual('<span>31.01.2022</span>');
    expect(moment).toBeCalledWith('2022-01-31');
    expect(moment().format).toBeCalledWith('DD.MM.YYYY');
  });
});

单元测试结果：

 PASS  stackoverflow/62042433/DateNavigation.test.jsx (13.544s)
  62042433
    ✓ display date correctly (54ms)

--------------------|---------|----------|---------|---------|-------------------
File                | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------------|---------|----------|---------|---------|-------------------
All files           |     100 |       50 |     100 |     100 |                   
 DateNavigation.jsx |     100 |       50 |     100 |     100 | 6                 
--------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        15.23s

【讨论】：