DEV Community: Ben Weiser

Testing Axios Requests With Jest

Ben Weiser — Sat, 06 Apr 2019 23:49:43 +0000

Let's say we have a simple async function that calls some remote data. We pass in our query and configuration object. To see an example of what can be passed through this request config see the Axios docs. My query in this case is just the url key in the config for example /user which could be an API end point. This function simply returns the data from axios (the actual response body from your endpoint). If we fail to get a response from our endpoint, the function is going to catch and we'll throw a console error.

request.js

export const fetchData = async (query, config
) => {
  try {
    const { data } = await axios.request({
      method: 'get',
      url: encodeURI(query),
      ...config
    });

    return data;
  } catch (e) {
    console.error('Could not fetchData', e);
  }
};

Now let's create a new file request.spec.js we want to add two imports

import mockAxios from 'axios';
import { fetchData } from '../request';

In order to test this we need to use a mocked version of Axios which is conveniently imported from the core library. We're now ready to write our test

  it('should call a fetchData function', done => {
    fetchData('/test', {}).then(response => {
      expect(response).toEqual({
        data: {},
      });
    });
    expect(mockAxios.request).toHaveBeenCalledWith({
      method: 'get',
      url: '/test'
    });
    expect(mockAxios.request).toHaveBeenCalledTimes(1);
    expect(consoleErrorSpy).not.toHaveBeenCalled();
    done();
  });

First we call then function with a test query and an empty config to ensure then test that our response is correct. Now we are testing mockAxios.request that it was called with the arguments we expected, that it was called only one time, and that our function did not throw an error. Finally we call the done() callback which let's just know our asynchronous operations are complete.

How To Set Up ESLint, TypeScript, Prettier with Create React App

Ben Weiser — Fri, 05 Apr 2019 23:58:26 +0000

Note: CRA 3.0 will include TS linting with ESLint out of the box, https://github.com/facebook/create-react-app/issues/6475

I recently learned that TSLint was soon to be deprecated (cue sad violin music), but for very good reason as the JS/TS community starts to converge around a common set of core technologies. If you're interested in learning about these reason Palantir (creator of TSLint) has a nice read for you over here.

Alas the time had come for me to switch my small personal project to TypeScript. I've been a full time TypeScript dev for the past year and found that I miss it dearly even on smaller JavaScript projects. I used to opt for plain old JS to reduce complexity, but at this point my knowledge of TypeScript makes it fairly effortless to configure on even the simplest projects. Not to mention that the latest version of Create React App support TypeScript integration right out of the box!

I've set up TSLint quite a few times in the past, but knowing that ESLint was the future of TypeScript linting I decided to give it a go. Set up wasn't as straight forward as I would've hoped given that things are in quite a state of flux at the moment presented some challenges due to lack of documentation so I've decided to document here.

This article assumes you're using the latest version of CRA which comes with ESLint already out of the box.

First, let's install or devDependencies



npm i -D @types/react @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-config-react eslint-plugin-prettier prettier

Your devDependecies in package.json should now look like this,



  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^1.6.0",
    "@typescript-eslint/parser": "^1.6.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }

Now create two files in your projects root (same level as your src folder).



.eslintignore
.eslintrc.json

You might see some tutorials use .yml or .js configurations and some tutorials might exclude an .eslintignore all together and use pattern matching in their node js scripts to exclude certain folders. All of these approaches are valid and it's really a matter of preference which one you decide to use.

In your .eslintrc.json add



{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "env": {
    "browser": true,
    "jasmine": true,
    "jest": true
  },
  "rules": {
    "prettier/prettier": ["error", { "singleQuote": true }]
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser"
}

and in your .eslintignore add any paths you don't want linted. In my case, I want to exclude my tests folders and the service worker that is packaged with CRA



src/registerServiceWorker.js
src/**/__tests__/**

In your package.json file we're going to add a new scripts file that will allow us to run our linter. Next to your react start, build, and test scripts add



"lint:fix": "eslint './src/**/*.{ts,tsx}'",

our next step assuming we've built a brand new Create React App project is to create our first TypeScript file. Go ahead and rename App.js to App.tsx and run npm start in your terminal. CRA will detect this is a TypeScript project and automatically add a tsconfig.json file for you. Running npm run lint will now get you output of your linted code within your terminal window. If you're using VSCode install the ESLint extension to get in editor highlighting. Now open up your App.tsx file and it should look like this

Hovering your mouse over the render method should reveal two ESLint errors specific to TypeScript.



Missing accessibility modifier on method definition render.eslint(@typescript-eslint/explicit-member-accessibility)
Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type)

In editor highlighting will let you know if your code is violating the configured linter rules without having to explicitly run the lint script. If we want to disable these rules we can add



   "@typescript-eslint/explicit-member-accessibility": 0,
   "@typescript-eslint/explicit-function-return-type": 0,

to our rules configuration in eslintrc.json. This is where we can disable rules, enable new rules and customize the default configuration that we've extended. In some cases certain linting issues can be auto-corrected by appending --fix to npm run lint.

If using VSCode in your settings.json add the following to enable auto-fix on save,



  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],

Quicksort: A JS Breakdown

Ben Weiser — Sun, 31 Mar 2019 19:55:50 +0000

Quicksort is a recursive sorting algorithm that uses the divide and conquer approach. By starting with the simplest base case to check against we continue to break out list into smaller problems. On average quicksort performs at O(n log n).

Here's the full algorithm,

const quickSort = values => {
  if (values.length <= 1) {
    return valuesToSort;
  }

  let lessThanPivot = [];
  let greaterThanPivot = [];
  const pivot = values.shift();

  for (let i = 0; i < values.length; i++) {
    const value = values[i];
    value <= pivot ? lessThanPivot.push(value) : greaterThanPivot.push(value);
  }

  return [...quickSort(lessThanPivot), pivot, ...quickSort(greaterThanPivot)];
};

Let's break it down,

  if (values.length <= 1) {
    return values;
  }

This is our base case. When using recursion you must always have an exit condition so that your function does not run infinitely causing you to run out of memory. valuesToSort is simply going to be a JavaScript array of integers. If the length of this array is less than equal to or less than one there's nothing more to sort so we exit the function by returning the values. When this function runs our quicksort is complete.

  let lessThanPivot = [];
  let greaterThanPivot = [];
  const pivot = values.shift();

Here we are creating two arrays to hold our values that are smaller than or greater than the pivot value. A pivot can be selected from any index within the array. In our case we are using the shift() method to select the first item in the array.

  for (let i = 0; i < values.length; i++) {
    const value = values[i];
    value <= pivot ? lessThanPivot.push(value) : greaterThanPivot.push(value);
  }

We iterate over the length of the array and check if the value of less than or equal to the pivot. If it is than we push it to the less than array (yes even if it's equal). If this condition is false, then we're going to push it to the greater than array since reason tells us it must be greater.

return [...quickSort(lessThanPivot), pivot, ...quickSort(greaterThanPivot)];

This is where our recursion happens. For the array less than the pivot we're going to call quicksort on this again until there are no more items to be sorted. The same is true for the items that are greater than the pivot. Through each recursive call we return a new array with the items in the correct order.

Try it out with a random array of numbers,

quickSort([50,34,21,2,3,5,7,9])

The result will look like this,

[ 2, 3, 5, 7, 9, 21, 34, 50 ]