Могу ли я проверить данные отображения функций в дочерний компонент, используя Jest и Enzyme

Question

Я делаю вызов API, который возвращает массив объектов. Затем я отображаю эти объекты на дочерний компонент. Моя идея, как проверить это, состоит в том, чтобы смоделировать вызов API с помощью Jest и проверить, равно ли количество отображаемых дочерних компонентов количеству объектов. На самом деле я не уверен, что мне нужно издеваться над вызовом API и думаю, что может быть проще просто объявить массив и использовать его.

Вот пример массива, который я использовал бы для возврата моего вызова API.

let organizationRoles = [
    {name : "2nd Project Manager", assigned : false}, 
    {name : "Executive Sponser", assigned: false}, 
    {name : "CFO or Finance Contact", assigned: false},
    {name : "OI&T Contact", assigned: false},
    {name : "Payroll Contact", assigned: false},
    {name : "HR Contact", assigned: false}
]

и вот тест, который я пытаюсь запустить.

it('renders the appropriate number of cards', () => {
    const wrapper = mount(<AssignRoles />);
    const cardHolder = wrapper.find('#assign-roles-roles-page');
    expect(cardHolder.children()).toHaveLength(organizationRoles.length)
})

Моя главная проблема в том, что я не выяснил, куда вводить массив.

Вот код, который я хочу протестировать из моего AssignRoles компонента.

<div className={styles.rolesPage} id="assign-roles-roles-page">
   {organizationRoles.map((roles, key)=> {
       return(<AssignRolesCard name={roles.name} assignee={roles.assignee} id={key} handleFormOpen={handleFormOpen}/>)
   })}
</div>

В ответ на мой запрос API:

axios
      .get(URL, config)
      .then(response => {
        const organizationRoles = response.data;
      })
      .catch(error => {
        if (error.response.status === 401 && token) {
          this.renewToken();
        }
      });

Я все еще довольно новичок в Jestи хочу понять, как лучше использовать макеты в моем тестировании.

Answer 1

Это в основном зависит от реализации, которую вы хотите протестировать. Поэтому, если ваш компонент отвечает за выборку данных из API, вы должны смоделировать функцию, используемую в компоненте

, например

import axios from 'axios';

jest.mock('axios');

describe('given a component that is fetching data using fetch', () => {

  describe('if the api retuns someData', () => {
    let wrapper;
    beforeAll(() => {
      axios.get.mockResolvedValue(someData);
      wrapper = shallow(<MyComponent />);
    });
    it('should render X', () => {
      expect(wrapper). // assert something 
    });
  });

  describe('if the api returns some other data, () => {
    let wrapper;
    beforeAll(() => {
      axios.get.mockResolvedValue(someOtherData);
      wrapper = shallow(<MyComponent />);
    });
    it('should render Y', () => {
      expect(wrapper). // assert something 
    });
  });
});

, если ваш компонент получает данные как свойство, которое выдолжны предоставить данные как свойство в тесте:

describe('given a component that receives data as prop', () => {
  describe('with some other data, () => {
    let wrapper;
    beforeAll(() => {
      wrapper = shallow(<MyOtherComponent data={someOtherData} />);
    });
    it('should render X', () => {
      expect(wrapper). // assert something 
    });
  });
});