lundi 21 octobre 2019

How do I test a component that fetches data from an external API?

I'm trying to test a component that fetches data from Axios and it keeps giving me an error that the data fetched is undefined. I'm using jest and react testing library and also mocking Axios. The test result shows the Axios mock has been called but it keeps returning an undefined result. This is the code:

const lyricData = {
  message: {
    body: {
      lyrics: {
        lyric:
          "Do you love the rain, does it make you dance",
       lyrics_copyright:
          'Lyrics powered by www.musixmatch.com. This Lyrics is NOT for Commercial use and only 30% of the lyrics are returned.',

      }
    },
   }
};

afterEach(cleanup);
const props = {
  tracks: [
    {
      track: {
        track_id: 181987382,
        artist_name: 'sama',
        tracks: 'Hold my Liquor'
      }
    }
  ]
};

it('loads and displays lyric', async () => {
  axiosMock.get.mockResolvedValue({ data: lyricData });

  const url = `https://cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/track.lyrics.get?format=json&callback=callback&track_id=181987382&apikey=${process.env.REACT_APP_API_KEY}`;
  const { getByTestId, getByTitle } = render(<Lyrics {...props} />);

  const loading = getByTestId('loading');
  const title = getByTitle('Next Lyric');

  expect(loading).toBeInTheDocument();
  expect(title).toBeInTheDocument();

  const resolvedValue = await waitForElement(() => getByTestId('lyrics'));

  expect(resolvedValue).toBeInTheDocument();

  expect(axiosMock.get).toHaveBeenCalledTimes(1);
  expect(axiosMock.get).toHaveBeenCalledWith(url);
});

it keeps saying lyricData.lyric in the component below is undefined

const [lyrics, setLyrics] = useState();
  const [copyright, setCopyRight] = useState();
  const [count, setCount] = useState(0);

  const trackName = tracks[count];
  const trackId = trackIds[count];

  const classes = useStyles();
  const rand = randomNumber(trackIds.length);

  useEffect(() => {
    const getLyrics = async (id) => {
      const lyricData = await generateLyric(id);
      setLyrics(lyricData.lyric);
      setCopyRight(lyricData.lyrics_copyright);
    };
    if (trackId) getLyrics(trackId);
  }, [trackId, trackIds]);

Aucun commentaire:

Enregistrer un commentaire