Блог

Я пишу модульный тест в react native, чтобы отобразить что-то в зависимости от типа данных, извлекаемых из магазина redux. Для текущей реализации давайте предположим, что я буду отображать заголовок как первый раз, если свойство категории объекта сведений имеет значение «первый», в противном случае я буду отображаться уже там, если значение равно «дублировать».

Component.js

 // All the appropriate and required imports have been done. 

const [heading,setHeading] = useState('');
const { details, id } = useSelector(state => state.data);

React.useEffect(()=>{
  if(details.category === 'duplicate')
  setHeading('Already There')
  else
  setHeading('First time')
},[])

return (
  <Text>{heading}</Text>
) 

Component.test.js

 import { render } from '@testing-library/react-native';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

describe('Component',()=>{
it('Should contain Already There text', () => {
    const middlewares = [thunk];
    const mockStore = configureStore(middlewares);
    let getByText = null;
    const store = mockStore({
      ...initialData,
      data:{
        id:'XYZ',
        details:{
          category:'',
          ......
        }
      }
    });
    const mockNavigation= {
      addListener: jest.fn(),
      navigate: jest.fn()
    };
    store.dispatch = jest.fn();
    const tempWrapper = render(
      <Provider store={store}>
        <Component navigation={mockNavigation}/>
      </Provider>
    )
    ({ getByText } = tempWrapper);
    expect(getByText('Already There')).toBeDefined();
  });
}) 

Структура начального состояния восстановления представляет собой объект с приведенной ниже структурой:

 {
  ....,
  data:{
    id:'',
    details:{
      category:'',
      ......
    }
  },
  ....,
} 

… —> means additional data not relevant to this component

Обычно состояние уже было бы обновлено до того, как этот компонент получит данные, поэтому, чтобы смоделировать его, я сохраняю обновленное значение в хранилище redux, прежде чем издеваться над ним. Теперь проблема, с которой я сталкиваюсь, заключается в том, что во время тестирования я получаю значение details как пустой объект, а не как объект, для которого я установил его перед отображением для тестирования. При нормальном использовании компонент работает нормально, и магазин обновляется должным образом, но во время тестирования я получаю пустой объект для свойства сведений из магазина. Ожидаемое значение — это значение с категорией, заданной для дублирования, как я пытаюсь установить перед тестированием.

Возможно, я упускаю какой-то шаг, который необходимо предпринять перед тестированием компонента с использованием магазина таким образом. Любая помощь будет высоко оценена.