时间戳

首页 > 解决方案 > 如何在测试中获取反应应用状态 ['Key'] 的值？

reactjs - 如何在测试中获取反应应用状态 ['Key'] 的值？

问题描述

我正在尝试对反应应用程序进行测试，但遇到了问题。我无法jest正常工作，所以我一直在尝试解决它，这导致了我目前的问题。我的测试不起作用的原因是因为我调用 state 中键值的方式要求我使用enzymein jest。他们是一种在不使用 jest 的情况下获取反应应用程序内部状态键值的方法吗？我该怎么做？

这是我的反应应用程序中的功能：

setTimeMonth = (time) => {
    const today = moment().format('YYYY-MM-DD');
    const before = moment().subtract(time, 'months').format('YYYY-MM-DD');
    this.setState({Date2: today});
    this.setState({Date1: before});
}

这是对该功能的测试：

it('setTimeMonth(number)', () => {
  const wrapper = new ReactPage;
  expect(wrapper.state('Date1').toMatch(""));
  expect(wrapper.state('Date2').toMatch(""));
  wrapper.setTimeMonth(1);
  expect(wrapper.state('Date1').toMatch(moment().format('YYYY-MM-DD')));
  expect(wrapper.state('Date2').toMatch(moment().subtract(1, 'Month').format('YYYY-MM-DD')));
});

标签： reactjsunit-testingjestjsenzyme

解决方案

这是一个工作示例：

例子.js：

import * as React from 'react';
import moment from 'moment';

export class Example extends React.Component{

  constructor(props) {
    super(props);
    this.state = { Date1: '', Date2: '' };
  }

  setTimeMonth = (time) => {
    const today = moment().format('YYYY-MM-DD');
    const before = moment().subtract(time, 'months').format('YYYY-MM-DD');
    this.setState({Date2: today});
    this.setState({Date1: before});
  };

  render() {
    return <div/>
  }
}

示例.test.js：

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

import { Example } from './example';

describe('Example', () => {

  it('setTimeMonth(number)', () => {
    const wrapper = shallow(<Example/>);
    expect(wrapper.state('Date1')).toBe('');
    expect(wrapper.state('Date2')).toBe('');
    wrapper.instance().setTimeMonth(1);
    expect(wrapper.state('Date2')).toMatch(moment().format('YYYY-MM-DD'));
    expect(wrapper.state('Date1')).toMatch(moment().subtract(1, 'months').format('YYYY-MM-DD'));
  });

});

推荐阅读