Как смоделировать функцию React Component и смонтировать компонент?

Question

У меня есть компонент реагирования, который использует API получения для получения сообщений.Теперь во время «шутливого тестирования» я хочу смоделировать метод API fetch для возврата данных json из файла.Смонтируйте компонент для тестирования, чтобы подсчитать количество постов, найдя количество классов.Ниже приведен код.

Код тестового файла

    import React from 'react';
    import { mount } from 'enzyme';
    import dummyjson from '../dummydata.json';
    import DemoApp from '../index';

    describe('xxxx test component', () => {
  it('first test', async () => {
    global.fetch = jest.fn(() => Promise.resolve(dummyjson));
    const wrapper = shallow(<DemoApp />, { disableLifecycleMethods: true });
    expect(wrapper.state('isLoaded')).toBe(false);
    await wrapper.instance().loadPosts();
    expect(wrapper.state('isLoaded')).toBe(true);
  });
    });

Код реагирующего компонента

        import React from 'react';
    /* eslint class-methods-use-this: ['error', { 'exceptMethods': ['fetch'] }] */

    export default class DemoApp extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: [],
        };
      }

   componentDidMount() {
    this.loadPosts().then(
      (result) => {
        this.setState({
          isLoaded: true,
          items: result,
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error,
        });
      },
    );
  }

  loadPosts() {
    return fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json()).then(result => result)
      .catch(error => error);
  }

      render() {
        const { error, isLoaded, items } = this.state;
        if (error) {
          return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
          return <div>Loading...</div>;
        }
        return (
          <div>
            {items.map(item => <div className="somecssclass"> {item.title} {item.title}</div>)}
          </div>
        );
      }
    }

Ниже приведено dummydata json

    [
    {
      "userId": 1,
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
    }
]

Яполучить ниже ошибка ниже ошибка / предупреждение, хотя я предоставил ниже исключение для метода выборки в файле класса компонента реакции./ * eslint class-method-use-this: ['error', {'исключениемMethods': ['fetch']}] * /

Как мы можем исправить это предупреждение / ошибку?

Любая помощь высоко ценится.Спасибо.

Answer 1

Состояние гонки.loadPosts является асинхронным, в то время как тестирование является синхронным, и нет никаких обещаний цепочки ожидания для выполнения fetch цепочки обещаний.

Есть проблемы с потоком управления и методологией тестирования.loadPosts необходимо вернуть обещание, чтобы оно могло быть приковано:

  loadPosts() {
    return fetch('https://jsonplaceholder.typicode.com/posts')...;
  }

Правильный способ модульного тестирования - это проверить loadPosts в одном тесте и проверить его напрямую:

  it('...', async () => {
    global.fetch = jest.fn(() => Promise.resolve(dummyjson));
    const wrapper = shallow(<DemoApp />, { disableLifecycleMethods: true });
    expect(wrapper.state('isLoaded').toBe(false);
    await wrapper.instance().loadPosts();
    expect(wrapper.state('isLoaded').toBe(true);
  });

И в другом тесте loadPosts можно поставить в тупик / посмеяться и заявить, что он вызывается в componentDidMount.

Также обратите внимание, что global.fetch = заменяет его раз и навсегда.Желательно, чтобы над ней издевались jest.stub.