javascript - prevState 在 enzyme 测试中未定义，但在组件中定义

Question

看到一个奇怪的问题，其中 prevState 在 componentDidUpdate 中未定义，但在组件在浏览器中运行时定义。

我在构造函数中设置了状态，并且在 componentDidUpdate 中检查了 prevState 上的值。

  componentDidUpdate(prevProps, prevState) {
    const { showForm } = this.state;

    if (prevState.showForm && !showForm) {
      return this.input.current.focus();
    }

  }

这是 enzyme 测试:

 it("should call focus on input if form was shown, and now form is open", () => {
    component = mount(<Component {...props} />);
    const prevProps = component.props();
    const prevState = {
      ...component.state(),
      showForm: true
    };
    const focusSpy = sinon.spy(component.instance().input.current, "focus");
    component.instance().componentDidUpdate(prevProps, prevState);
    expect(focusSpy).to.have.been.called;
  });

这种方法有效 - 但只是因为我从 enzyme 测试中调用 componentDidUpdate 并传递它 prevState。理想情况下，我想避免这种情况 - 只需定义 prevState - 就像组件在浏览器中实际工作时一样。

处理这个问题的模式是什么？

Answer 1

您的测试不应显式调用 componentDidUpdate。下面是一个组件和测试，我已经验证它只是多次调用 setState 来触发要测试的场景。

MyComp.js

import React from "react";

class MyComp extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { showForm: false };
    this.input = React.createRef();
  }
  toggleShowForm = () => {
    this.setState({ showForm: !this.state.showForm });
  };
  componentDidUpdate(prevProps, prevState) {
    console.log(
      "componentDidUpdate prevProps: " +
        JSON.stringify(prevProps) +
        "; prevState: " +
        JSON.stringify(prevState) +
        "; this.state: " +
        JSON.stringify(this.state)
    );
    if (prevState.showForm && !this.state.showForm) {
      console.log("setting focus");
      this.input.current.focus();
    }
  }

  render() {
    return (
      <>
        <input type="text" ref={this.input} />
        <br />
        <button onClick={this.toggleShowForm}>Toggle showForm</button>
      </>
    );
  }
}

export default MyComp;

MyComp.test.js

import React from "react";
import { mount } from "enzyme";
import MyComp from "./MyComp";
import sinon from "sinon";

it("should call focus on input if showForm goes from true to false", () => {
  const myCompWrapper = mount(<MyComp />);
  console.log("before first setState");
  const focusSpy = sinon.spy(myCompWrapper.instance().input.current, "focus");
  myCompWrapper.instance().setState({ showForm: true });
  expect(focusSpy.called).toEqual(false);
  console.log("before second setState");
  myCompWrapper.instance().setState({ showForm: false });
  expect(focusSpy.called).toEqual(true);
});

以下是此测试生成的控制台日志:

• 第一次 setState 之前
• componentDidUpdate prevProps: {}; prevState: {"showForm":false}; this.state: {"showForm":true}
• 第二次 setState 之前
• componentDidUpdate prevProps: {}; prevState: {"showForm":true}; this.state: {"showForm":false}
• 设置焦点

这是一个 CodeSandbox，您可以在其中执行此测试: