How to test an href attribute of an anchor tag that leads to a redirecting url?

Question 1

If you try to visit https://reactjs.dev, you’ll be redirected to https://react.dev. The status code of the response in this case is 308 (from the network tab in the browser). I am trying to write a unit test for a similar case using react testing library. When testing the working (destination) URL, the test passes. See the following code:

Passing test:

import { render, screen } from "@testing-library/react"

test("verify link is responging", async () => {
    render(<a href="https://react.dev">Click Here</a>);
    const href = screen.getByRole("link").getAttribute("href");
    const res = await fetch(href);
    console.log(res.status);         // 200
    expect(res.status).toBe(200)     // passes
})

Failing test (for which I actually want to write the test):

import { render, screen } from "@testing-library/react"

test("verify link is responging", async () => {
    render(<a href="https://reactjs.org">Click Here</a>);  // redirects to "https://react.dev"
    const href = screen.getByRole("link").getAttribute("href");
    const res = await fetch(href);   // throws an error at this step and exits
    expect(res.status).toBe(308);         // doesn't reach this line
})

This gives the following error:

 console.error
    Error: Cross origin http://localhost forbidden
        at dispatchError (C:\Users\usera\Desktop\Courses\testing\udemy\color-button\node_modules\jsdom\lib\jsdom\living\xhr\xhr-utils.js:63:19)
        at Object.validCORSHeaders (C:\Users\usera\Desktop\Courses\testing\udemy\color-button\node_modules\jsdom\lib\jsdom\living\xhr\xhr-utils.js:75:5)
        at Request.<anonymous> (C:\Users\usera\Desktop\Courses\testing\udemy\color-button\node_modules\jsdom\lib\jsdom\living\xhr\XMLHttpRequest-impl.js:672:25)
        at Request.emit (events.js:400:28)
        at Request._processResponse (C:\Users\usera\Desktop\Courses\testing\udemy\color-button\node_modules\jsdom\lib\jsdom\living\helpers\http-request.js:196:12)
        at ClientRequest.<anonymous> (C:\Users\usera\Desktop\Courses\testing\udemy\color-button\node_modules\jsdom\lib\jsdom\living\helpers\http-request.js:101:12)
        at Object.onceWrapper (events.js:520:26)
        at ClientRequest.emit (events.js:400:28)
        at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:647:27)
        at HTTPParser.parserOnHeadersComplete (_http_common.js:127:17)
        at TLSSocket.socketOnData (_http_client.js:515:22)
        at TLSSocket.emit (events.js:400:28)
        at addChunk (internal/streams/readable.js:293:12)
        at readableAddChunk (internal/streams/readable.js:267:9)
        at TLSSocket.Readable.push (internal/streams/readable.js:206:10)
        at TLSWrap.onStreamRead (internal/stream_base_commons.js:188:23) undefined

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at dispatchError (node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:66:53)
      at Object.validCORSHeaders (node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:75:5)
      at Request.<anonymous> (node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:672:25)
      at Request._processResponse (node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:196:12)
      at ClientRequest.<anonymous> (node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:101:12)

FAIL src/App.test.js
  × verify link is responging (374 ms)

  ● verify link is responging

    TypeError: Network request failed

      at node_modules/whatwg-fetch/dist/fetch.umd.js:566:18
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        4.908 s
Ran all test suites related to changed files.

What I want to do:
I want to write a test so that if the response status is 308, get the redirected link and test it until you get a response status of 200.

Question 2

The issue you are seeing with https://reactjs.org is because its an external API called during your tests, and it has CORS restriction different than the jsdom setting that Jest uses.

If you are using Jest v28 or above, you can do bypass this by setting the Jest config testEnvironmentOptions.url like:

testEnvironmentOptions: {
  url: 'https://reactjs.org',
}

Refer: https://jestjs.io/docs/configuration#testenvironmentoptions-object

If you are using versions lower than v28, you can use the testURL config:

testURL: 'https://reactjs.org',

Refer: https://archive.jestjs.io/docs/en/24.x/configuration#testurl-string

Leave a Comment Cancel reply