Кто-нибудь может привести пример тестирования React-Redux Jest?

10

Мне очень тяжело учиться использовать шутки. Все обучающие материалы, с которыми я сталкиваюсь, либо учат вас, как тестировать script, который отображает dom, например <App /> с моментальными снимками или без них. В других руководствах рассказывается, как издеваться над тестами с входами. но я не могу найти учебники, которые четко объясняют и дают примеры, которые я могу использовать.

Например, script снизу, у меня есть идея о том, как тестировать часть рендеринга, но я не знаю, как проверить редукцию или остальные функции.

Может ли кто-нибудь привести пример тестирования ниже script, который я могу использовать в качестве ссылки для остальных файлов, которые мне нужно проверить в моем проекте?

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import CustomSearch from '../Components/CustomSearch';
import CustomToolBar from '../Components/CustomToolBar';
import Table from '../Components/Table';
import InsertButton from '../Components/InsertButton';

import UserForm from './UserForm ';

import { fetchUsers, deleteUser } from '../../actions/users';
import setModal from '../../actions/modal';

import TableColumns from '../../constants/data/TableColumns';

class Users extends Component {
  constructor(props) {
    super(props);
    this.onInsert = this.onInsert.bind(this);
    this.onDelete = this.onDelete.bind(this);
    this.onEdit = this.onEdit.bind(this);
    this.props.fetchUsers({ accountId: this.props.userData.account.id, token: props.userData.token });
  }

  onDelete(row) {
    if (confirm(`Are you sure you want to delete user ${row.first} ${row.last}?`)) {
      this.props.deleteUser({
        registered: row.registered,
        id: row.id,
        accountId: this.props.userData.account.id,
        token: this.props.userData.token
      });
    }
  }

  onEdit(row) {
    console.log(row);
    const modal = () => (<UserForm data={row} isEdit />);
    this.props.setCurrentModal(modal, 'Existing User Form');
  }

  onInsert() {
    const modal = () => (<UserForm />);
    this.props.setCurrentModal(modal, 'Add New User');
  }

  render() {
    const options = {
      searchField: (props) => (<CustomSearch {...props} />),
      insertBtn: () => (<InsertButton onClick={this.onInsert} />),
      toolBar: (props) => (<CustomToolBar {...props} />),
      onDelete: this.onDelete,
      onEdit: this.onEdit,
    };
    return (
      <Table data={this.props.users} columns={TableColumns.USERS} options={options} title="Users" />
    );
  }
}

User.propTypes = {
  setCurrentModal: PropTypes.func.isRequired,
  fetchUsers: PropTypes.func.isRequired,
  deleteUser: PropTypes.func.isRequired,
  userData: PropTypes.object.isRequired,
  users: PropTypes.array,
};

const mapStateToProps = (state) => ({
  userData: state.userData.data,
  users: state.tableData.users,
});

const mapDispatchToProps = (dispatch) => ({
  fetchUsers: (data) => dispatch(fetchUsers(data)),
  deleteUser: (data) => dispatch(deleteUser(data)),
  setCurrentModal: (modal, title) => dispatch(setModal(modal, title, null, true)),
});

export default connect(mapStateToProps, mapDispatchToProps)(User);
  • 0
    Пока никто не отвечает, я дам вам полное объяснение, когда завтра буду свободен, как это сделать. Знаете ли вы, как проводить тестирование в целом, и это просто лишняя часть, где вы подключаете компоненты, в которых вы не уверены?
  • 0
    У меня есть идея о том, как проводить тестирование снимков и основы этого.
Теги:
jestjs
jest

1 ответ

2
Лучший ответ

Вы должны протестировать исходный компонент, потому что он очищает работу сокращений, поэтому вам не нужно ее проверять. Если по какой-либо причине вы хотите протестировать mapStateToProps или mapDispatchToProps экспортировать их также и протестировать их отдельно по отдельности.

Итак, если вы экспортируете свой исходный компонент следующим образом:

export { Users }; // here you export raw component without connect(...)
export default connect(mapStateToProps, mapDispatchToProps)(Users);

Затем вы можете протестировать его как стандартный компонент реакции, импортировав именованный экспорт, например

import { Users } from './Users';

describe('Users', () => ....
   it('should render', () => ...

Если вы хотите протестировать компонент connected, потому что вы не хотите рендерить shallow и, возможно, вы переносите много вложенных подключенных компонентов, вам необходимо обернуть ваш компонент <Provider> и создать для него хранилище.

Вы можете помочь себе, используя redux-mock-store, который будет использоваться для вас.

Все хорошо объяснено в официальной документации по сокращению в Рецепты > Написание тестов, поэтому мое предложение состоит в том, чтобы внимательно прочитать всю главу. Вы также можете прочитать о тестировании создателей действий, редукторов и еще более сложных концепций.

Чтобы узнать больше и получить лучший опыт, я рекомендую проверить эти 2 комментария ниже из официальных репозиториев редукция/регресс-редукция.

Изображение 113858

Прямая ссылка на комментарий: https://github.com/reactjs/react-redux/issues/325#issuecomment-199449298


Изображение 113859

Прямая ссылка на комментарий: https://github.com/reactjs/redux/issues/1534#issuecomment-280929259


Связанный вопрос о StackOverflow:

Как Unit Test Связанные с React-Redux компоненты?

  • 0
    Я писал тесты для редукторов и создателей действий и простых чистых компонентов, таких как кнопка, контейнер. Я думал, что должен был протестировать эти большие файлы, где у нас есть пользователи и функции. Я смотрю на шутку неправильно?
  • 0
    Если вы хотите проверить методы onEdit , onInsert , onDelete , вы всегда можете получить экземпляр компонента и методы тестирования вручную, например, const wrapper = mount(<Users />; const instance = wrapper.instance(); expect(instance.onDelete()).to... и т.д. Подробнее о методе instance() энзима можно прочитать здесь: github.com/airbnb/enzyme/blob/v2.9.1/docs/api/ReactWrapper/…
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню