mardi 3 mars 2020

React jest pass data to mounted component

I am trying to test a component that use context. After I mount it (shallow does not work with useContext apparently) I am trying to set default values for the component data.

I was expecting const contextValues = { text: 'mock', msg: 'SUCCESS' }; and passing that to the AlertContextProvider to set a state for that component but I am probably looking at this the wrong way.

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=>
      {props.children}
    </AlertContext.Provider>
  );
};

export default AlertContextProvider;

Alert.js (component):

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;

Alert.js(text)

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'
  });
});

Aucun commentaire:

Enregistrer un commentaire