DEV Community

grusingh
grusingh

Posted on

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
  ...
}
Enter fullscreen mode Exit fullscreen mode

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
  ...
}
Enter fullscreen mode Exit fullscreen mode

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);
  });
});
Enter fullscreen mode Exit fullscreen mode

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

export function someCalculation(x, y) {
  return x + y;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)