Jest React Насмешка div / prop внутри компонента

Question

Я пытаюсь использовать Jest для тестирования моментального снимка моего компонента, в котором div иногда может быть пустым, а в другое время в нем есть что-то еще, например, <Dropdown>.

render() {
    return (
         <div>
            {this.props.children}
        </div>
    );
  }

У меня есть пара страниц, где родительский компонент ничего не передает для реквизита, поэтому div пуст, и другие страницы, где родительский компонент передает <Dropdown>. Я надеюсь это имеет смысл. Я делаю сдерживание: https://reactjs.org/docs/composition-vs-inheritance.html

Теперь мой тест выглядит следующим образом:

describe('<MyComponent/>', () => {
  it('renders a correct snapshot with an empty  div', () => {
    const renderer = new ShallowRenderer();
    const props = {
      prop1: 'prop1',
      prop2: jest.fn(),
    };
    const tree = renderer.render(<MyComponent {...props} />);
    expect(tree).toMatchSnapshot();
  });

  it('renders a correct snapshot with div displaying something', () => {
    jest.mock('components/common/Dropdown', () => () => (
       <div id="mockDownload">Dropdown</div>
    ));
    const renderer = new ShallowRenderer();
    const props = {
      prop1: 'prop1',
      prop2: jest.fn(),
      prop3: Dropdown
    };
    const tree = renderer.render(<MyComponent {...props} />);
    expect(tree).toMatchSnapshot();
  });
});

Не думаю, что я делаю это правильно. По сути, я просто пытаюсь проверить 2 случая: 1, где div пуст, и другой, где div что-то имеет. У Dropdown есть куча таких вещей, как buttonText и caption и onSelect, но я не хочу их проверять.

Я тоже пробовал:

  it('renders a correct snapshot with div displaying something', () => {
    const renderer = new ShallowRenderer();
    const props = {
      prop1: 'prop1',
      prop2: jest.fn(),
    };

    const dropdown = <Dropdown />;

    const tree = renderer.render(<MyComponent {...props}<div>{dropdown}</div></MyComponent>);
    expect(tree).toMatchSnapshot();
  });

Answer 1

Вам не нужно ничего издеваться. Просто визуализируйте компонент точно так же, как в коде приложения. Ваш последний пример близок к правильному. Просто отсутствует >:

const tree = renderer.render(<MyComponent {...props}><div><Dropdown/></div></MyComponent>);

Вам может понадобиться обновить снимок , чтобы это прошло.