Jest/Enzyme 错误：“方法 'setState' 仅用于在单个节点上运行。找到了 3 个。”

Question

我对在 React 应用程序上使用 Enzyme/Jest 进行测试还很陌生，所以我设置测试的方式可能有问题。

我特别想在我的组件中测试一个函数：reviewCandidate()

reviewCandidate() {
  const { candidate_id: candidateId, } = this.props.match.params;
  const { latest_application_id: latestApplication, } = this.state.candidateInfo;
  const { expressApi, } = this.props;
  /** @todo Define user when authentication is in place */
  const user = 'undefined';
  expressApi.addReviewedCandidate(
    parseInt(candidateId, 10),
    latestApplication,
    user,
    // comment,
  ).then(() => {
    // If the API call is successful, have the state reflect this accordingly
    this.setState({
      reviewInfo: {
        candidate_id: candidateId,
        last_application_reviewed: latestApplication,
        user,
        // comment: comment
      },
    });
    // Pop-up a snackbar indicating a successful review
    this.props.setSnackbar({
      open: true,
      message: <span>Candidate_{candidateId} marked as reviewed</span>,
    });
  });
}

在使用 Web 应用程序时，它可以在没有任何警告的情况下运行。当我尝试使用 Jest/Enzyme 对其进行测试时，就会出现问题。

这是我为上述函数编写的测试：

describe('Reviewing Candidates', () => {
  const mockCandidateReviewStatus = [];
  const mockApplicationsOfCandidate = {/* mock data */};

  const mockExpressApi = {
    applicationsOfCandidate() {
      return new Promise(resolve => resolve(mockApplicationsOfCandidate));
    },
    candidateReviewStatus() {
      return new Promise(resolve => resolve(mockCandidateReviewStatus));
    },
    addReviewedCandidate() {
      return new Promise(resolve => resolve());
    },
  };
  const handleError = error => error;
  it('ensures reviewedCandidates() is called correctly', async() => {
    const setSnackbar = jest.fn(() => 'foobar');
    const wrapper = shallow(
      <Candidate
        expressApi={mockExpressApi}
        handleError={handleError}
        match={{
          params: {
            candidate_id: 153,
          },
        }}
        utils={utils}
        setSnackbar={setSnackbar}
      />
    );
    /**
     * These wrapper.update() calls ensure componentDidMount() finish setting
     * the state of the component
     *
     * Unsure if this is the best way to deal with waiting for 
     * componentDidMount() to finish
     */
    await wrapper.update();
    await wrapper.update();
    await wrapper.instance().reviewCandidate();
    /**
     * @todo: Check this.state.reviewInfo is set as expected
     */
    expect(setSnackbar).toHaveBeenCalled();
  });
});

但是await wrapper.instance().reviewCandidate() 调用会导致 Enzyme 崩溃。

Error: Method “setState” is only meant to be run on a single node. 3 found instead.
    at ShallowWrapper.single (/path/to/project/node_modules/enzyme/build/ShallowWrapper.js:1828:17)
    at ShallowWrapper.setState (/path/to/project/node_modules/enzyme/build/ShallowWrapper.js:575:14)
    at Candidate.ShallowWrapper.instance.setState (/path/to/project/node_modules/enzyme/build/ShallowWrapper.js:217:35)
    at expressApi.addReviewedCandidate.then (/path/to/project/src/components/Candidate.js:514:12)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

如果我在 API 调用之后注释掉 .then() 中的 this.setState 调用：

reviewCandidate() {
  // ...
  expressApi.addReviewedCandidate(
    // ...
  ).then(() => {
    // If the API call is successful, have the state reflect this accordingly
    /*
    this.setState({
      reviewInfo: {
        candidate_id: candidateId,
        last_application_reviewed: latestApplication,
        user,
        // comment: comment
      },
    });
    */
    // Pop-up a snackbar indicating a successful review
    this.props.setSnackbar({
      open: true,
      message: <span>Candidate_{candidateId} marked as reviewed</span>,
    });
  });
}

然后测试没有任何问题：

 PASS  test/Candidate.test.js (15.954s)
 PASS  test/Main.test.js

Test Suites: 2 passed, 2 total
Tests:       17 passed, 17 total
Snapshots:   0 total
Time:        20.378s
Ran all test suites related to changed files.
----------------------------|----------|----------|----------|----------|-------------------|
File                        |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------------------------|----------|----------|----------|----------|-------------------|
All files                   |    31.05 |    24.58 |    23.04 |    31.88 |                   |
 src                        |        0 |        0 |        0 |        0 |                   |
  index.js                  |        0 |        0 |        0 |        0 |   1,2,3,4,5,6,7,9 |
 src/components             |    43.93 |    38.41 |    33.86 |    44.92 |                   |
  Candidate.js              |    62.41 |    60.87 |       50 |    62.59 |... 88,489,492,616 |
  Main.js                   |    92.31 |    88.89 |    79.31 |    92.21 |... 34,342,354,363 |
----------------------------|----------|----------|----------|----------|-------------------|

如果相关，这里是在测试中调用 Mock API 调用的同一组件中的 componentDidMount() 函数：

componentDidMount() {
    const candidateId = this.props.match.params.candidate_id;
    Promise.all([
      this.props.expressApi.applicationsOfCandidate(candidateId),
      this.props.expressApi.candidateReviewStatus(candidateId),
    ]).then((data) => {
      const candidateInfo = data[0][this.props.match.params.candidate_id];
      const reviewInfo = data[1][0];
      this.setState({ /* Sets various state parameters based on what was returned from the API calls*/ });
    }).catch((err) => {
      this.props.handleError(err);
      this.setState({
        error: err,
      });
    });
}

我在做什么导致Error: Method “setState” is only meant to be run on a single node. 3 found instead.？

如果我需要提供有关组件本身的更多信息，请告诉我。

提前感谢您的帮助。

Answer 1

wrapper.update() 不应该在那里。它不返回承诺，也不能是awaited。 Enzyme 已经默认运行生命周期钩子，包括componentDidMount。

问题是componentDidMount 不可测试且未公开承诺。它应该被提取到一个返回可以链接的承诺的方法中：

loadSomething() {
    const candidateId = this.props.match.params.candidate_id;

    return Promise.all([
      this.props.expressApi.applicationsOfCandidate(candidateId),
      this.props.expressApi.candidateReviewStatus(candidateId),
    ]).then((data) => {
      const candidateInfo = data[0][this.props.match.params.candidate_id];
      const reviewInfo = data[1][0];
      this.setState({ ... });
    }).catch((err) => {
      this.props.handleError(err);
      this.setState({
        error: err,
      });
    });
}

componentDidMount() {
    this.loadSomething();
}

那么它可以在一个测试中被存根：

jest.stub(Candidate.prototype, 'loadSomething')
shallow(<Candidate .../>);
expect(shallow.instance().loadSomething).toHaveBeenCalledTimes(1);

并直接在另一个中测试：

shallow(<Candidate .../>, { disableLifecycleMethods: true });
await shallow.instance().loadSomething();
expect(shallow.state(...))...