Почему в моем тесте используется отрисованный экран из предыдущего теста, а не тот, который был отрисован в самом тесте? - PullRequest
1 голос
/ 25 мая 2020

У меня есть следующие тесты:

import React from 'react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';
import Main from '../main';
import LoginContext from '../loginContext';

describe('Main component', () => {
  test('renders the peeps list when the current path is / or /peeps', async () => {
    fetch.mockResponse(JSON.stringify([]));

    render(
      <Router>
        <LoginContext.Provider value={['', null, () => { return true; }]}>
          <Main />
        </LoginContext.Provider>
      </Router>
    );

    await waitFor(() => expect(screen.getByText('Peeps')).toBeInTheDocument());
  });

  test('renders signup/login when you click the link', async () => {
    fetch.mockResponse(JSON.stringify([]));

    render(
      <Router>
        <LoginContext.Provider value={['', null, () => { return false; }]}>
          <Main />
        </LoginContext.Provider>
      </Router>
    );

    await waitFor(() => expect(screen.getByText('Peeps')).toBeInTheDocument());
    fireEvent.click(screen.getByText('Sign up/Log in'));
    expect(screen.getByLabelText('Name:')).toBeInTheDocument();
  });

  test('renders new peep when you click the new peep link', async () => {
    fetch.mockResponse(JSON.stringify([]));

    render(
      <Router>
        <LoginContext.Provider value={['', null, () => { return true; }]}>
          <Main />
        </LoginContext.Provider>
      </Router>
    );

    await waitFor(() => fireEvent.click(screen.getByText('New Peep')));
    expect(screen.getByLabelText('Text:')).toBeInTheDocument();
  });

  test('renders an individual peep when you click on it in the peep list', async () => {
    fetch.mockResponse(
      JSON.stringify([
        {
          id: 3,
          body: 'my first peep',
          created_at: '2018-06-23T13:21:23.317Z',
          updated_at: '2018-06-23T13:21:23.317Z',
          user: {
            id: 1,
            handle: 'Phil',
          },
          likes: [
            {
              user: {
                id: 1,
                handle: 'Phil',
              },
            },
          ],
        },
      ])
    );

    render(
      <Router>
        <LoginContext.Provider value={['', null, () => { return true; }]}>
          <Main />
        </LoginContext.Provider>
      </Router>
    );

    await waitFor(() => fireEvent.click(screen.getByText('my first peep')));
  });
});

Если я запускаю каждый из тестов независимо, используя test.only, каждый из них проходит без проблем. Однако выполнение тестов как набора приводит к сбою последнего теста, так как он не может найти на экране текст «мой первый взгляд».

* 1005 отображаемый экран из предыдущего теста, и я подтвердил это, проверив информацию, предоставленную Jest, когда тест не прошел. сам тест?
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...