Устройство тестирования рендеринга компонента в реакции

Что такое рендеринг?

Render Op – это шаблон, который широко используется в экосистеме реагирования. В двух словах Render Spr – это шаблон, в котором вы передаваете функцию как опоры, обычно называемую оказывать или чаще как дети пропры Например:

import React from 'react';

const RenderPropComponent = ({children}) => {
  const [counter, setCounter] = React.useState(0)  

  return children({counter, setCounter});
};

// usage
const Usage = () => {
  return (
    
      {({counter}) => 
Counter: {counter}
}
    
  );
};

Если вы хотите прочитать более широко о рендеринге Rects Data в Reaction и их использование в экосистеме RACT, проверьте этот пост.

Тестовая подготовка

Для того, чтобы проверить компонент Render Prop, мы должны сначала написать один! Наш компонент будет извлекать сообщения от API и выставляют государство загрузки и столб для потребительского компонента.

import React from 'react';
import PropTypes from 'prop-types';

import { fetchPosts } from './api';

export default class FetchPosts extends React.Component {
  static propTypes = {
    children: PropTypes.func.isRequired
  };

  state = { posts: [], loading: false };

  async componentDidMount() {
    this.setState({ loading: true });

    const posts = await fetchPosts();

    this.setState({ posts, loading: false });  
  }

  render() {
    return this.props.children({posts: this.state.posts, loading});
  }
}

Написание теста

Мы собираемся написать наш тест, используя jest и Реагистрационная тестирование-библиотека Но те же принципы применяются, если вы используете что-то еще, чтобы написать свои тесты.

import React from 'react';
import { render } from 'react-testing-library';

import FetchPosts from './FetchPosts';

const mockPosts = [{ id: 1, title: 'Title' }];

jest.mock('./fetchPosts', () => Promise.resolve(mockPosts));

describe('FetchPosts component test', () => {
  it('should expose loading and posts prop', () => {
    const postsCallbackMock = jest.fn();

    const { getByTestId } = render(
      {postsCallbackMock}
    );

    expect(postsCallbackMock).toHaveBeenCalledWith({
      loading: false,
      posts: mockPosts
    })
  });
});

Это одно немного проще, чтобы проверить компонент Render Sport. Другой способ – написать потребительский компонент, который что-то делает на странице, а затем ожидает, что он соответствует с указанным вами данным. Например:

import React from 'react';
import { render } from 'react-testing-library';

import FetchPosts from './FetchPosts';

const mockPosts = [{ id: 1, title: 'Title' }];

jest.mock('./fetchPosts', () => {
  return new Promise(resolve => {
    setTimeout(() => resolve(mockPosts), 100);
  });
});

const FetchPostsConsumer = () => (
  
    {({loading, posts}) => {
      if(loading) return ;

      return posts.map(post => 
{post.title}
)
    }}
  
);

describe('FetchPosts component test', done => {
  it('should return correct loading and posts props', () => {
    const postsCallbackMock = jest.fn();

    const { getByTestId } = render(
      
    );

    expect(getByTestId('loading').textContent).toBe('Loading');

    setTimeout(() => {
      expect(getByTestId('post-title').textContent).toBe('Title');
      done()
    })
  });
});

В начале этого теста мы объявляем, что наша FetchPosts Модуль возвращается, чтобы мы могли иметь те же результаты на каждом тестовом запуске (эти тесты называются детерминированными). Эта издевалась версия функции разрешается обещание, но после некоторого времени, что дает нам достаточно времени, чтобы осмотреть состояние загрузки позже в нашем тесте.

Далее мы объявляем компонент, который использует компонент RENDER SPOP, который мы действительно хотим проверить. После того, как компонент отображается, мы проверяем, присутствует ли присутствие загрузки текста. Через некоторое время мы проверяем, если правильный пост отображается в результате обратного вызова Render Crop. Этот подход немного дольше, но на мой взгляд, он дает нам немного больше, ориентированный на пользовательский тест, который в конце концов, как пользователи собираются использовать наш компонент.

Заключение

Как вы можете видеть тестирование Render Prop компонента не так сложно в конце. Поскольку такого рода компонент не генерирует вывод само по себе, мы должны предоставить эту недостающую часть в нашем тесте, а затем выполнять утверждения. Проще говоря, это просто предоставить макетную функцию и ожидать, что она вызывается с правильными параметрами. Какой подход вам нравится больше? Поделитесь этим в комментариях ниже 👇

Оригинал: “https://dev.to/maksimovicdanijel/unit-testing-render-prop-component-in-react-27hm”