Ошибка Jest / Enzyme: «Метод 'setState' предназначен для запуска только на одном узле. Вместо этого найдено 3".

Question

Я довольно новичок в тестировании с помощью Enzyme / Jest в приложении React, поэтому, возможно, что-то не так с тем, как я настраиваю свой тест.

Я специально хочу протестировать одну функцию вМой компонент: 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>,
    });
  });
}

Он работает без каких-либо предупреждений при использовании веб-приложения.Проблема возникает, когда я пытаюсь проверить ее с помощью 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() вызывает сбой энзима.

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)

Если я закомментирую вызов this.setState в .then() после вызова API:

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 |
----------------------------|----------|----------|----------|----------|-------------------|

В случае, если это уместно, вот функция componentDidMount() в том же компоненте, которая вызывает вызовы Mock API в тесте:

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() не должно быть там.Он не возвращает обещание и не может быть await ред.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(...))...