Question

我写了一个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());
  });

通过了。但是我不认为这很好。我的期望是如果render prop中的函数返回<p>Sometext<p>，在测试用例中，我该如何处理呢？

Answer 1

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

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

如何编写测试用例以检查函数是否返回确切的组件

1 个答案: