使用计时器更新状态不会返回更新的值

Question

我是使用 Jest 进行单元测试的新手。该项目有一个进度指示器组件，它使用 setInterval 作为计时器。我需要对“完成”状态变量在“进度”函数中的 20 毫秒滴答声上正确更新进行单元测试。

"react-dom": "^16.8.6",
"react-redux": "^6.0.1",
"react-scripts": "^2.1.3"

progress.js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';

const styles = theme => ({
  progress: {
    margin: theme.spacing.unit * 2
  }
});

class CircularDeterminate extends React.Component {
  state = {
    completed: 0
  };

  componentDidMount() {
    this.timer = setInterval(this.progress, 20);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  progress = () => {
    let be = this.state.completed;
    console.log('>>>>>> ', this.state.completed);
    const { completed } = this.state;
    this.setState({ completed: completed >= 100 ? 0 : completed + 1 });
    console.log('+++++ ', be, '  ', this.state.completed);
  };

  render() {
    const { classes } = this.props;
    if (!this.props.statusCode) {
      return (
        <div>
          <CircularProgress
            className={classes.progress}
            variant="determinate"
            value={this.state.completed}
          />
        </div>
      );
    } else {
      return null;
    }
  }
}

CircularDeterminate.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CircularDeterminate);

progressTest.js

import React from 'react';
import { shallow, mount } from 'enzyme';
import Progress from '../progress';

describe('Input Component', () => {
  it('update timer', () => {
    jest.useFakeTimers();
    const wrapper = mount(<Progress />);
    wrapper.instance().setState({ completed: 8 });

    jest.advanceTimersByTime(41);
    wrapper.update();

    expect(wrapper.instance().state.completed).toBe(10);
  });
});

上述测试失败：预期：10，接收：8。我希望“完成”在 2 个滴答声（约 41 毫秒）后为 10。

Answer 1

上述代码中的一个问题（这可能是也可能不是实际问题，具体取决于 Jest 的假计时器的工作方式，但肯定是 a 问题）是您违反了基本规则之一React 状态：由于state updates are asynchronous，如果您要设置新状态基于现有状态，您必须使用setState 的回调形式。所以这是不正确的：

const { completed } = this.state;
this.setState({ completed: completed >= 100 ? 0 : completed + 1 });
console.log('+++++ ', be, '  ', this.state.completed);

这是正确的形式：

this.setState(
    ({completed}) => ({
        completed: completed >= 100 ? 0 : completed + 1
    }),
    () => {
        console.log('+++++ ', be, '  ', this.state.completed);
    }
);