如何编写测试用例来检查函数是否返回精确的组件答案

【问题标题】：How to write a test case to check whether a function return exact component or not如何编写测试用例来检查函数是否返回精确的组件
【发布时间】：2019-07-12 10:06:36
【问题描述】：

我编写了一个 SelectList 组件，将“render”道具指定为返回组件的函数。我想测试它，但不知道用函数测试的最佳方法。

import renderer from 'react-test-renderer';
import { shallow, mount } from 'enzyme';
import TestSelectList from './SelectList';

const SelectList = ({ inputVariant, input, inputProps, render, meta, children, ...restProps }) => {
  return (
    <Select input={inputVariant} {...input} {...inputProps} {...restProps}>
      {(render && render()) || children}
    </Select>
  );
};

所以我写了我的测试用例：

 it('Render correctly render prop', () => {
    const component = mount(<SelectList render={() => <p>Kha</p>} />);
    // console.log(renderer.create(component.props().render()).toJSON());
    expect(renderer.create(component.props().render()).toJSON()).toMatchObject(renderer.create(<p>Kha</p>).toJSON());
  });

它通过了。但我不认为这很好。我的期望是如果渲染道具中的函数返回<p>Sometext<p>，在测试用例中我该如何处理才能知道。

【问题讨论】：

标签： reactjs unit-testing testing jestjs enzyme

【解决方案1】：

您可以使用.contains 方法来匹配组件的渲染输出：

it('Render correctly render prop', () => {
    const component = mount(<SelectList render={() => <p>Kha</p>} />);
    expect(component.contains(<p>Kha</p>)).toBe(true);
  });

【讨论】：