Реакция передачи данных Jest на смонтированный компонент - PullRequest
Новая
       7

Реакция передачи данных Jest на смонтированный компонент

0 голосов
/ 04 марта 2020

Я пытаюсь протестировать компонент, использующий контекст. После того, как я смонтировал его (очевидно, мелкий не работает с useContext), я пытаюсь установить значения по умолчанию для данных компонента.

Я ожидал const contextValues = { text: 'mock', msg: 'SUCCESS' }; и передаю это AlertContextProvider, чтобы установить состояние для этого компонента но я, вероятно, смотрю на это неправильно.

AlertContext. js: 

import React, { createContext, useState, useContext } from 'react';

export const AlertContext = createContext();


const AlertContextProvider = props => {
  const [alert, setAlert] = useState({
    text: '',
    msg: ''
  });

  const updateAlert = (text, msg) => {
    setAlert({
      text,
      msg
    });
  };
  return (
    <AlertContext.Provider value={{ alert, updateAlert }}>
      {props.children}
    </AlertContext.Provider>
  );
};

export default AlertContextProvider;

Предупреждение. js (компонент): 

import React, { useContext } from 'react';
import './Alert.scss';
import { AlertContext } from '../context/AlertContext';

const Alert = () => {
  const { alert } = useContext(AlertContext);

  return (
    <div className='alert'>
      <p className="alert-para">{alert.text}</p>
    </div>
  );
};

export default Alert;

Оповещение. js (текст) 

import React from 'react';
import { mount } from 'enzyme';
import Alert from '../components/Alert';
import AlertContextProvider from '../context/AlertContext';

describe('Alert', () => {
  let wrapper;
  beforeEach(() => {
    const contextValues = { text: 'mock', msg: 'SUCCESS' };

    // Below mounting is  needed as Enzyme does not yet support shallow mocks
    wrapper = mount(
      <AlertContextProvider value={contextValues}>
        <Alert />
      </AlertContextProvider>
    );
  });

  test('Should render a  paragraph', () => {
    const element =wrapper.find('.alert-para');
    expect(element.length).toBe(1); // this is correct
    expect(element.text()).toEqual('mock'); // THIS FAILS AS THE VALUE OF THE ELEMENT IS AN EMPTY STRING WHILE I WAS EXPECTING 'mock'
  });
});

1 Ответ

0 голосов
/ 04 марта 2020

Вы передаете свой contextValues через value реквизит на <AlertContextProvider />, но вы никогда не используете этот реквизит для инициализации данных внутри вашего провайдера контекста.

В этом примере я использовал useEffect hook как componentDidMount для инициализации вашего состояния AlertContext.js` 


const AlertContextProvider = props => {
  const [alert, setAlert] = useState({
    text: '',
    msg: ''
  });

  // The same as component did mount
  useEffect(() => {
    setAlert({
      text: props.value.text,
      msg: props.value.msg
    })
  }, [])


  const updateAlert = (text, msg) => {
    setAlert({
      text,
      msg
    });
  };

  return (
    <AlertContext.Provider value={{ alert, updateAlert }}>
      {props.children}
    </AlertContext.Provider>
  );
};

Для функции updateAlert вы должны использовать хук useCallback для ее запоминания.

...