Web page returns status code of 404, but renders properly

  create-react-app, javascript, jestjs, reactjs

I am creating a website using React and create-react-app. The site works exactly as intended, however, when I am running tests on the site the test results don’t match the expected outcomes. When testing the responses from my website (ie. if pages exist and load properly etc), all pages return status code 404 except "/", which returns status code 200 as it should. Using the links on the website to navigate between components loads them properly, and so does typing in the exact URL of the page (ie. "localhost:5000/example"), but when testing the pages in jest they all return 404.

I know that since my site is a SPA, React might not automatically handle direct links to specific components properly, but what baffles me is how there are no errors, warnings, or missing functionality on any of the pages, but when running tests on the pages all pages return 404 except for "/", which should correspond to index.html so the request shouldn’t fail even if React didn’t work properly. I haven’t been able to find anyone else experiencing this issue, since everyone else getting false 404s from React also weren’t able to type in a specific address to a component and have it work.

My question is how do I prevent pages/components from returning a status code of 404 when they clearly work properly, or if that’s not the issue how would I get my unit tests to recognize that the pages work as intended?

Here is my App.js

function App() {
  return (
    <Provider store={store}>
      <Router>
        <div className="container">
          <Navbar />
          <br />
          <Route path="/" exact component={HomePage} />
          <Route exact path="/example" component={ExamplePage} />
        </div>
      </Router>
    </Provider>
  );
}

export default App;

HomePage.js

import React, { Component } from 'react';

export default class HomePage extends Component {
    render() {
        return (
            <div>
                <h4>Home page</h4>
            </div>
        )
    }
}

ExamplePage.js

import React, { Component } from 'react';

export default class ExamplePage extends Component {
    render() {
        return (
            <div>
                <h4>A bunch of text here.</h4>
            </div>
        )
    }
}

App.test.js

describe('Client Unit Tests', function () {
  //Unit test 1: check server response
  describe('Client responds to requests', function () {
    it('should respond', function (done) {
      request.get(site_url, function (error, response, body) {
        should.exist(response, 'Response is either null or undefined');
        done();
      });
    });
  });

  // Unit test: check pages
  describe('Client responds properly to all valid page requests', function () {
    // Unit test 2: Check home page
    it('responds correctly to a GET request to ""', function (done) {
      request.get(site_url, function (error, response, body) {
        should.exist(response, 'Body is either null or undefined');
        should.notStrictEqual(response.statusCode, 404, '404 Page not found');
        done();
      });
    });

    // Unit test 3: Check example page
    it('responds correctly to a GET request to "/example"', function (done) {
      console.log(site_url + '/example');
      request.get(site_url + '/example', function (error, response, body) {
        should.exist(response, 'Body is either null or undefined');
        should.notStrictEqual(response.statusCode, 404, '404 Page not found');
        done();
      });
    });
  });
});

Source: Ask Javascript Questions

LEAVE A COMMENT