Question

使用功能构建的React组件的实验测试。在此之前，我习惯于：

 const animalsTable = shallow(<Animals/*props*//>); 
 animalsTable.instance().functionToTest();

ShallowWrapper.instance() returns null for a function，所以现在在Alex Answer之后，我正在直接测试DOM。在我的React组件的简化版本和一些测试下面：

反应组件：

import React, {useState, useEffect} from 'react';
import ReactTable from 'react-table';

const AnimalsTable = ({animals}) => {
  const [animals, setAnimals] = useState(animals);
  const [messageHelper, setMessageHelper] = useState('');

  //some functions

  useEffect(() => {
    //some functions calls
  }, []);

  return (
    <div>
      <ReactTable id="animals-table" 
      //some props
      getTrProps= {(state, rowInfo) => {
        return {
          onClick: (_event) => {
            handleRowSelection(rowInfo);
          }
        };
      }}
      />
      <p id="message-helper">{messageHelper}</p>
    </div>
  );
};

export default AnimalsTable;

测试：

//imports
describe('AnimalsTable.computeMessageHelper', () => {
  it('It should display the correct message', () => {
    const expectedResult = 'Select the correct animal';

    const animalsTable = mount(<AnimalsTable //props/>);

    const message = animalsTable.find('#message-helper').props().children;

    expect(message).to.equal(expectedResult);
  });
});

这个很好用。

我的问题是如何在ReactTable组件上测试行以测试handleRowSelection方法？

我当前的测试是：

describe('AnimalsTable.handleRowSelection', () => {
  it('When a selection occurs should change the animal state', () => {
    const animalsTable = mount(<AnimalsTable //props/>);

    const getTrProps = channelsSelectionTable.find('#animals-table').props().getTrProps;

    //what to do from here to trigger onClick() ?
  });
});

编辑： 我认为正确的方法将是这样，但是handleRowSelection不会被触发：

const animalsTable= mount(<AnimalsTable //props />);
const rows = animalsTable.find('div.rt-tr-group');
rows.at(0).simulate('click');

我将尝试添加一个简单的codeSandBox

Answer 1

在这里，我找到了解决方案，我必须使用Chrome检查类名，然后使用它来模拟对表第一行的点击：

it('When an animal selection occurs, it change the checkbox state', () => {
    const animalsTable = mount(<AnimalsTable //props/>);

    const rows = animalsTable.find('div.rt-tr.-odd');
    rows.at(0).simulate('click');

    const checkBoxResult = animalsTable.find('input[type="checkbox"]')
                                          .at(0).props().checked;

    expect(checkBoxResult).to.equal(true);
  });

可能不是测试它的正确方法，但这是可行的。

测试使用功能构建的React组件

1 个答案: