Рубрики
Без рубрики

Реактивные советы – тестирование, перенаправления и уценка

Посмотрите мои книги на Amazon по адресу https://www.amazon.com/john-au-yeung/e/b08ft5nt62 подписаться на мою … Tagged with React, JavaScript, Codenewbie, Codequality.

Проверьте мои книги на Amazon в https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Подписаться на мой список адресов электронной почты сейчас в http://jauyeung.net/subscribe/

React – популярная библиотека для создания веб -приложений и мобильных приложений.

В этой статье мы рассмотрим несколько советов по написанию лучших приложений React.

Пропустить реквизит с компонентом перенаправления с помощью REACT Router

Мы можем передать реквизит с помощью React Router’s Перенаправление Компонент, проходя в Государство ценность.

Например, мы можем написать:

Мы проходим в пути по пути URL.

И Государство Имеет состояние, которое мы хотим передать в компонент.

И тогда мы можем написать:

this.props.location.state.id

Чтобы получить id в компоненте.

Различать события левого и щелчка правой кнопкой мыши с React

Мы можем различить левое и щелкнуть правой кнопкой мыши, проверив Тип Собственность событие объект.

Например, если у нас есть:

return 
click me

Тогда мы можем написать:

handleClick(e) {
  if (e.type === 'click') {
    console.log('Left click');
  } else if (e.type === 'contextmenu') {
    console.log('Right click');
  }
}

Это обнаружение синтетического события.

Мы также можем обнаружить слева и щелкнуть правой кнопкой мыши с помощью NativeEvent :

handleClick(e) {
  if (e.nativeEvent.which === 1) {
    console.log('Left click');
  } else if (e.nativeEvent.which === 3) {
    console.log('Right click');
  }
}

который Свойство имеет тип щелчка.

1 левый щелчок, а 3-правой кнопкой мыши.

Использование Jest to Spy на вызове метода в ComponentDidmount

Мы можем использовать Spyon Метод для проверки того, какой метод компонента вызывается.

Например, мы можем написать:

const spy = jest.spyOn(Component.prototype, 'someMethod');
const wrapper = mount();
wrapper.instance().someMethod();
expect(spy).toHaveBeenCalled();

Компонент это компонент, который мы тестируем.

Somemethod это метод, который мы шпионируем.

Мы установим компонент и получаем экземпляр с помощью экземпляр метод

Somemethod это метод, который мы вызвали.

Тогда шпион Следует вызвать.

А потом мы очищаем наши шпионы:

afterEach(() => {
  spy.mockClear()
})

после каждого теста.

Как захватить только событие клика родителей, а не детей

Мы должны позвонить Предотвратить Чтобы захватить только событие клика родительского компонента, а не детское.

Например, мы можем написать:

onParentClick(event) {
  event.preventDefault();
  console.log(event.currentTarget);
}

Как отобразить от навыки от компонента React

Мы можем отобразить маркировку с библиотекой React-Markdown.

Например, мы можем написать:

import React from 'react'
import Markdown from 'react-markdown'

const code = "# header";

React.render(
  ,
  document.getElementById('root')
);

Мы получаем Markdown Компонент формирует пакет.

А потом мы проходим в код к Источник Опора, чтобы сделать это.

Кроме того, мы можем преобразовать его в HTML, а затем отображать, чем с DangerousSetInnerHtml с помечен библиотека.

Например, мы можем написать:

import React from 'react';
import marked from 'marked';

class Markdown extends React.Component {
  constructor(props) {
    super(props);

    marked.setOptions({
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: true,
      smartLists: true,
      smartypants: false
    });
  }
  render() {
    const { text } = this.props,
    html = marked(text || '');

    return (
      

        

      

    );
  }
}

Markdown.propTypes = {
  text: React.PropTypes.string.isRequired
};

Markdown.defaultProps = {
  text: ''
};

Мы устанавливаем параметры с Setoptions метод

GFM означает, что мы представляем ароматизированную маркировку GitHub.

Таблицы означает, что мы рендеринг столов.

перерывы Значит, мы рендеринг линии разрывы с Br.

педантичный означает, что мы соответствуем исходной спецификации Markdown и не исправляем их ошибки или поведение.

дезинфицировать Мы дезинфицируем HTML.

Умные списки использует поведение SmartList Spec.

Smartypants означает использование интеллектуальной типографской пунктуации для таких вещей, как цитаты и черты.

Тестирование с шутками с использованием объектов даты Производить разные снимки в разных часовых поясах

Мы можем установить текущее время для постоянного времени в шутку.

Например, мы можем написать:

Date.now = jest.fn(() => new Date(Date.UTC(2020, 7, 9, 8)).valueOf())

Тогда мы можем установить часовой пояс, когда мы запустим наши тесты.

В Mac и Linux мы добавляем:

"test": "TZ=America/Los_Angeles react-scripts test --env=jsdom",

И в окнах добавляем:

"test": "set TZ=America/Los_Angeles && react-scripts test --env=jsdom",

к Package.json S Сценарии раздел.

Вывод

Мы можем передать штаты Перенаправление составная часть.

Кроме того, мы можем установить часовой пояс для и даты для Jest Tests.

Мы также можем шпионить за вызовами функций с ними.

Мы также можем запечатлеть слева и щелкнуть правой кнопкой мыши и щелкнуть только из родительских элементов.

Существуют различные способы отображения в нашем компоненте React.

Пост Реактивные советы – тестирование, перенаправления и отметка появился первым на Веб -разработчик Анкет

Оригинал: “https://dev.to/aumayeung/react-tips-testing-redirects-and-markdown-4hcn”

Читайте ещё по теме: