Working with legacy React apps

Working with legacy code can be challenging especially when code is lacking in test coverage. In his must read book Working Effectively with Legacy Code author Michael Feathers talks about a refactoring technique Extract Method for tackling large methods.

I have successfully used this technique many times to enhance or add features to complex React components and adding test coverage.

Example

We are given a task to fix bug in a LoanCalculator component. It's a huge file with complex logic and no test coverage. We have identified the cause of bug and ready to make changes.

function LoanCalculator(props) {
  ...
  lots of lines of code
  ...

  if (someCondition) {
    // bug is here 
    // fix: props.x + props.y
    return props.x - props.y;
  }

  ...
  more code
  ...
}

The recommended way is to create tests for LoanCalculator when possible before making any code changes. In our case we don't understand the logic enough to create tests for whole file.

Step 1: Start by extracting the lines for bug fix into a separate method. Notice that we are doing a named export for someCalculation function. This refactoring enables us to start creating tests for our newly extracted method.

// bug is here 
// fix: props.x + props.y
export function someCalculation(x, y) {
  return x - y;
}

function LoanCalculator(props) {
  ...
  lots of lines of code
  ...

  if (someCondition) {
    return someCalculation(props.x, props.y);
  }

  ...
  more code
  ...
}

Step 2: Add tests to cover and set expectations for someCalculation function.

/* file: LoanCalculator.spec.js */
import {someCalculation} from './LoanComponent';

describe('LoanCalculator', () => {
  it('someCalculation should return sum of x and y', () => {
    const result = someCalculation(2,3);
    expect(result).toEqual(5);
  });
});

Step 3: Now that we have a failing test we can apply the bug fix.

export function someCalculation(x, y) {
  return x + y;
}

Step 4: The test we created should we passing now.

By using the Extract Method refactoring technique we were able to reduce complexity in LoanComponent component and add test to go along with our bug fix.

Hope you find this article useful. Please share your feedback.