Компонент Test Реакция не может получить clientWidth

Question

Я пытаюсь разработать юнит-тест для моего компонента реакции с шуткой и энзимом.Так что в основном мой компонент имеет слушателя изменения размера, когда изменение размера произошло, мой компонент обновит состояние компонента.Но я просто не мог получить clientWidth для моего реагирующего компонента.Ниже приведен код моего компонента.

import React, { Component } from "react";
import moment from "moment";
// import PropTypes from "prop-types";

import Table from "./Table";
import Grid from "./Grid";
import ActionBlock from "../ActionBlock";
import ConfirmDialog from './ConfirmDialog';
import ReactTooltip from 'react-tooltip'
import { debounce } from '../../utils';
import styles from './styles.scss';

export default class Pagination extends Component {

  constructor(props) {
    super(props);
    this.state = {
      index: props.index,
      type: props.type,
      config: props.config,
      data: props.data,
      currentPage: 1,
      dataPerPage: 20,
      enableActionBlock: props.enableActionBlock,
      confirmDialogIndex: null,
      confirmDialogActionName: null,
      confirmDialogData: null,
      width: 0
    };

    this.handleWindowResize = debounce(this.handleWindowResize.bind(this), 100); //delay trigger resize event
  }

  componentDidMount() {
    this.setState({ width: this.refs.pagination_wrapper.clientWidth })
    window.addEventListener('resize', this.handleWindowResize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleWindowResize);
  }

  handleWindowResize = () => {
    this.setState({ width: this.refs.pagination_wrapper.clientWidth })
  }

  render() {
    return (
      <div ref="pagination_wrapper" className={styles.pagination_wrapper}>
        <ReactTooltip />
        {this.renderViewType()}
        {this.renderConfirmDialog()}
      </div>
    )
  }
}

Pagination.defaultProps = {
  enableActionBlock: true,
  dataPerPage: 20
};

А ниже - мой тестовый код.

import React from 'react'
import { shallow, mount, render } from 'enzyme';
import Pagination from '../index';
let img = 'https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg';
let imageStream = 'http://192.168.100.125:8080/';
let imgQuoteError = `http://192.168.100.71/target-data/fr/target-person-images/1111112222233333@Rizkifika-Asanuli'nam/qTD8vYa.jpeg`;

describe('Testing Pagination', () => {

  let action = (actionName, indexData) => {
    console.log('action APP', actionName, indexData);
  }

  let dataListProps = {
    index: 'id',
    type: 'grid',
    config: [
      { text: 'Image', type: 'image', textPath: 'image', textColor: 'red', valuePath: 'image' },
      { text: 'Fullname', type: 'string', textPath: 'fullname', valuePath: 'fullname' },
      { text: 'Role', type: 'string', textPath: 'role', valuePath: 'role' },
      { text: 'Datetime', type: 'date', textPath: 'datetime', valuePath: 'datetime' },
      { text: 'Json', type: 'json', textPath: 'json', valuePath: 'json' },
    ],
    data: [
      { id: 305, created_at: '2018-02-23T09:43:08.928Z', rule_detail: { id: 1 }, cam_detail: { id: 2, name: 'kamera huawei' }, vas_detail: { id: 3, name: 'VAS 3' }, image: img },
      { id: 306, created_at: '2018-02-23T09:43:08.928Z', rule_detail: { id: 2, name: '' }, cam_detail: { id: 3, name: 'kamera avigilon' }, vas_detail: { id: 4, name: 'VAS 4' }, image: imageStream },
      { id: 306, created_at: '2018-02-23T09:43:08.928Z', rule_detail: { id: 2, name: null }, cam_detail: { id: 3, name: 'kamera avigilon' }, vas_detail: { id: 4, name: 'VAS 4' }, image: imgQuoteError },
      { id: 306, created_at: '2018-02-23T09:43:08.928Z', rule_detail: { id: 2, name: 'Crowd Behaviour' }, cam_detail: { id: 3, name: 'kamera avigilon' }, vas_detail: { id: 4, name: 'VAS 4' }, image: imageStream },
    ],
    onAction: action,
    enableActionBlock: false
  }

  it('snapshot', () => {
    const wrapper = shallow(<Pagination {...dataListProps}/>)
    expect(wrapper).toMatchSnapshot();
  })
})

Мне нужна помощь для решения этой проблемы

Answer 1

Как указано Xarvalus .Если вы хотите получить доступ к ссылкам, сначала необходимо смонтировать компонент, используя mount из import { shallow, mount, render } from 'enzyme';.

Но это будет иметь ошибку (RangeError: Неверная длина строки).Чтобы преодолеть это, мы должны преобразовать фермент в json, используя import toJson from 'enzyme-to-json';

полный рабочий код

import React from 'react'; 
import { shallow, mount, render } from 'enzyme'; 
import toJson from 'enzyme-to-json'; 
import Pagination from '../index';

describe('Testing Pagination', () => {
  it('snapshot', () => {
    const wrapper = mount(<Pagination {...dataListProps}/>)
    expect(toJson(wrapper)).toMatchSnapshot();  
  }) 
})

справочный номер

Answer 2

Вы можете получить доступ к объекту window внутри вашего компонента и получить поле window.innerWidth, которое, я полагаю, то, что вы ищете.