Тестирование компонентов React

Question

Я ломал голову, пытаясь найти способ проверить, какие реквизиты передаются в мои компоненты React, которые я написал. См. Пример:

FirstName. js

export default FirstName = (props) => {
 return (
   <Select value={props.value} />
 );
}

Выбор. js

export default Select = (props) => {
 return (
   <div>props.value</div>
 );
}

Тест, который я хочу написать, предназначен для компонента FirstName, я Я хочу убедиться, что значение prop передается в свойство значения Select Components.

Однако в настоящее время единственный способ проверить это - это подтвердить вывод Select. js, который не является частью модуль, который я тестирую, поэтому я бы не хотел, чтобы файл FirstName.test. js зависел от изменений, происходящих внутри Select. js.

Одно из решений, которое я слышал, - это используйте jest.mock('path/to/Select.js') ИЛИ

jest.mock('../moduleName', () => {
  return {
    __esModule: true,
    default: jest.fn(),
  };
});

, однако по какой-то причине функция «Выбрать в моем тесте» является фиктивной, а функция «Выбрать» в FirstName. js - нет, поэтому по какой-то причине она заглушает ее тест, но не для работающего кода.

Есть идеи?

Answer 1

Можете ли вы попробовать это следующим образом

import FirstName from '../src/FirstName';
describe('<FirstName />', () => {
  const mockProps = { name: 'name', };
  it('Check Select props', () => {
    const wrapper = shallow(<FirstName {...mockProps} />);
    expect(wrapper.find('Select').props()).toBe(mockProps);
  });

});