Проверьте дочерний компонент реагирования после асинхронного монтажа с использованием фермента. - PullRequest
Новая
       6

Проверьте дочерний компонент реагирования после асинхронного монтажа с использованием фермента.

0 голосов
/ 22 января 2020

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

Ниже приведены упрощенные коды.

Элемент ItemList 

import React, {useState, useEffect} from 'react';
import {fetchItems} from '../api';
import {addToSelectList} from '../listModule';
import Item from './Item';

function ItemList() {
  const [page, setPage] = useState(1);

  const [items, setItems] = useState([]);
  useEffect(() => {
    fetchItems().then(res => {
      setItems(res.data.items);
    });
  }, [page]);

  function onClickItem(item) {
    addToSelectList(item);
  }


  return (
    <ul>
      {items.map((item, index) => (
        <li>
          <Item key={index} name={item.name} onClick={() => {
            onClickItem(item);
          }} />
        </li>
      ))}
    </ul>
  );
}

Элемент Item 

import React from 'react';

function Item(props) {
  return (
    <div>
      <div onClick={() => {
        props.onClick();
      }}>{props.name}</div>
    </div>
  );
}

itemList.test. js 

import React from 'react';
import {mount} from 'enzyme';
import {addToSelectList} from '../listModule';
import ItemList from '../view/ItemList';
import Item from '../view/Item';

describe('<ItemList />, () => {
  test('onClickItem', () => {
    let wrapper = mount(<ItemList />);

    // fail
    // Expected: >0
    // Received:  0
    expect(wrapper.find(Item).length).toBeGreaterThan(0);
  });

});

Но есть два вопроса к нему.

  1. Когда я mount компонент ItemList и делаю wrapper.find(Item), нет Item компонент, поскольку компоненты Item отображаются после обновления состояния items. Как я могу проверить, что эти Item компоненты отображаются правильно ?

  2. После того, как я проверяю, что Item компонент отображается, как я могу вызвать onClick событие компонента Item и проверка того, что метод addToselectList называется ?

1 Ответ

1 голос
/ 23 января 2020

Вот решение для модульного тестирования:

itemList.tsx: 

import React, { useState, useEffect } from 'react';
import { fetchItems } from './api';
import { addToSelectList } from './listModule';
import Item from './item';

export default function ItemList() {
  const [page, setPage] = useState(1);
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetchItems().then((res) => {
      setItems(res.data.items);
    });
  }, [page]);

  function onClickItem(item) {
    addToSelectList(item);
  }

  return (
    <ul>
      {items.map((item: any, index) => (
        <li key={index}>
          <Item
            name={item.name}
            onClick={() => {
              onClickItem(item);
            }}
          />
        </li>
      ))}
    </ul>
  );
}

api.ts: 

export const fetchItems = async () => {
  return { data: { items: [] } } as any;
};

item.tsx: 

import React from 'react';

export default function Item(props) {
  return (
    <div>
      <div
        onClick={() => {
          props.onClick();
        }}
      >
        {props.name}
      </div>
    </div>
  );
}

listModule.ts: 

export const addToSelectList = (item) => {
  console.log(item);
};

itemList.test.tsx: 

import React from 'react';
import ItemList from './itemList';
import { mount } from 'enzyme';
import { fetchItems } from './api';
import { act } from 'react-dom/test-utils';
import Item from './item';
import { addToSelectList } from './listModule';

jest.mock('./api', () => {
  return { fetchItems: jest.fn() };
});

jest.mock('./listModule', () => {
  return { addToSelectList: jest.fn() };
});

describe('59853199', () => {
  it('should pass', async () => {
    const mFetchItemsResponse = { data: { items: [{ name: 'a' }, { name: 'b' }] } };
    (fetchItems as jest.MockedFunction<typeof fetchItems>).mockResolvedValueOnce(mFetchItemsResponse);
    const wrapper = mount(<ItemList />);
    expect(wrapper.find(Item).length).toBe(0);
    // when useEffect stable
    await act(async () => {
      await new Promise((resolve) => setTimeout(resolve));
    });
    wrapper.update();
    expect(wrapper.find(Item).length).toBeGreaterThan(0);
    wrapper
      .find(Item)
      .at(0)
      .prop('onClick')();
    expect(addToSelectList).toBeCalledWith(mFetchItemsResponse.data.items[0]);
  });
});

Результаты модульного теста с отчетом о покрытии: 

 PASS  src/stackoverflow/59853199/itemList.test.tsx
  59853199
    ✓ should pass (98ms)

--------------|----------|----------|----------|----------|-------------------|
File          |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
--------------|----------|----------|----------|----------|-------------------|
All files     |    94.44 |      100 |     87.5 |    94.44 |                   |
 item.tsx     |       75 |      100 |       50 |       75 |                 8 |
 itemList.tsx |      100 |      100 |      100 |      100 |                   |
--------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.18s, estimated 10s

Исходный код: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59853199

...