Test react component can't get clientWidth

Question

I'm trying to develop unit test for my react component with jest and enzyme. So basically my component have resize listener, when resize occured my component will update component state. But i just couldn't get the clientWidth for my react component. Below is some code of my component.

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
};

And below is my test code.

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();
  })
})

I need help for solving this

Answer 1

您可以访问组件内部的window对象，然后检索window.innerWidth字段，我想这就是您要查找的内容。

Answer 2

As pointed by Xarvalus . If wanna access refs, the component have to be mounted first by using mount from import { shallow, mount, render } from 'enzyme'; .

But it will have bug (RangeError: Invalid string length). So to overcome this, we have to convert enzyme to json by using import toJson from 'enzyme-to-json';

full working code

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();  
  }) 
})

reference issue