samedi 5 octobre 2019

"ReferenceError: EventSource is not defined" in React test

I am finishing up a project and adding some tests. Currently I just have the test that comes with create-react-app:

import React from 'react';
import ReactDOM from 'react-dom';
import Application from './Application';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Application />, div);
  ReactDOM.unmountComponentAtNode(div);
});

but it fails with the following error in my Translator component:

ReferenceError: EventSource is not defined

      102 |     };
      103 |     const eventSource =
    > 104 |       new EventSource('http://localhost:5000/translations/stream') || undefined;

The thing is, it runs fine when I run npm start: there are no errors at all and it receives my server-sent effects perfectly. Here is the relevant part of my Translator component:

useEffect(() => {
  const upsertTranslations = updatedTranslations => {
    const currentTranslations = [...translationList];
    updatedTranslations.forEach(updatedTranslation => {
      const translationIndex = currentTranslations.findIndex(
        x => x.uid === updatedTranslation.uid
      );
      currentTranslations[translationIndex] = updatedTranslation;
    });
    setTranslationList([...currentTranslations].sort(sortByTranslatedText));
  };

  const eventSource =
    new EventSource('http://localhost:5000/translations/stream') || undefined;
  if (eventSource) {
    eventSource.onmessage = event => {
      upsertTranslations(JSON.parse(event.data));
    };
  }
}, [translationList]);

I am relatively new to React in general, and especially testing its components, so I don't really get what is happening. I assume it has something to do specifically with the test. Fyi, I have ejected the application, which could be another reason. Other than that I have no clue, so any help is appreciated -- let me know if I should add some more information!

Aucun commentaire:

Enregistrer un commentaire