Почему первый тест Jest вызывает сбой второго теста?

Question

У меня есть компонент React, который отображает список компонентов. Я запускаю несколько тестов, которые макет модуля axios, который загружается в пользователей из JSONPlaceHolder. Все работает нормально, включая асинхронный тест и проверяет данные, как и ожидалось. Однако, если вы посмотрите на приведенный ниже код, он проходит только до тех пор, пока первый тест закомментирован? Я что-то пропустил? Давно стучал мне в голову. Есть ли какая-то очистка, которая должна быть сделана между тестами? Заранее спасибо.

import { waitForElement } from 'enzyme-async-helpers';
import UsersList from '../UsersList';
import axios from 'axios';

const mockUsers = [
    {
        "id": 1,
        "name": "Leanne Mock",
        "username": "Bret",
        "email": "Sincere@april.biz"
    },
    {
        "id": 2,
        "name": "John Mock",
        "username": "Jospeh",
        "email": "wacky@april.biz"
    }
]

axios.get.mockImplementationOnce(() => Promise.resolve({
    data: mockUsers
}))


describe('<UsersList /> tests:', () => {

        //WHEN I UNCOMMENT THIS TEST THE SECOND TEST FAILS?
        test('It renders without crashing', (done) => {
           // const wrapper = shallow(<UsersList />);
        });

        test('It renders out <User /> components after axios fetches users', async () => {
            const wrapper = shallow(<UsersList />);
            expect(wrapper.find('#loading').length).toBe(1); //loading div should be present


            await waitForElement(wrapper, 'User'); //When we have a User component found we know data has loaded
            expect(wrapper.find('#loading').length).toBe(0); //loading div should no longer be rendered
            expect(axios.get).toHaveBeenCalledTimes(1);

            expect(wrapper.state('users')).toEqual(mockUsers); //check the state is now equal to the mockUsers
            expect(wrapper.find('User').get(0).props.name).toBe(mockUsers[0].name); //check correct data is being sent down to User components
            expect(wrapper.find('User').get(1).props.name).toBe(mockUsers[1].name);
        })

})

Я получаю сообщение об ошибке:

    The render tree at the time of timeout:
     <div
      id="loading"
    >
       Loading users
    </div>

  console.warn node_modules/enzyme-async-helpers/lib/wait.js:42
    As JSON:
     { node:
       { nodeType: 'host',
         type: 'div',
         props: { id: 'loading', children: ' Loading users ' },
         key: undefined,
         ref: null,
         instance: null,
         rendered: ' Loading users ' },
      type: 'div',
      props: { id: 'loading' },
      children: [ ' Loading users ' ],
      '$$typeof': Symbol(react.test.json) }

Test Suites: 1 failed, 1 total
Tests:       2 failed, 2 total

Answer 1

Вы только издеваетесь над первым axios.get вызовом, потому что используете mockImplementationOnce .

Когда вы shallow(<UsersList />) дважды, второй раз истекает время загрузки пользователей.

Вы можете добавить beforeEach метод с mockResolvedValueOnce , чтобы высмеивать axios.get перед каждым тестом:

beforeEach(() => {
  axios.get.mockResolvedValueOnce({data: mockUsers});
}