HacktoberFest: PR#1

For hacktoberfest 2019, my first PR was for Facebook in the create-react-app project. Create-React-App provides an amazing boilerplate for starting react projects. It has around 73k stars on github and is used by 1.3M projects currently.

Issue

I took over the issue of adding tests for the feature of extending eslint.

https://github.com/facebook/create-react-app/issues/7519

Create React App recently added a feature which allows the user to add their own eslint config by providing overrides.

They required tests to cover this newly added feature.

Process

To get started, I decided to first fully understand the feature I was writing the tests for. I made a test app through create react app, and then tried to override some existing eslint config. I tried creating errors and warnings to fully understand how the feature was working. Then I started exploring the way CRA app was handling tests. It came out that they have a global testSetup which is created. Then each test Suite in fixtures folder gets spun up in a temporary directory and has its own dependencies installed with Yarn PnP.

Then I picked one rule of empty constructor in eslint. Create React App had it set to warning, but for my test suite I changed it to error. Then I wrote a test file which would spin up the suite and check for the build to be failed. I checked that the suite was failing due to the expected reason only.

PR

https://github.com/facebook/create-react-app/pull/7816

Work in Progress

So the issue stated to cover both javascript and typescript files, I followed the same process for typescript files, and created a test suite. But apparently, all of the existing as well newly added typescript test suites failed due to the following error:

Failed to load parser ‘@typescript-eslint/parser declared in ‘BaseConfig >> /Users/……./create-react-app/packages/eslint-config-react-app/index.js#overrides[0]’: Cannot find module ‘typescript

I tried solving this issue, but could not get a solution. So I marked the PR as Work In Progress, and left a comment for help on this issue.

Once I figure this issue out, I need to test my typescript tests, and the PR will be good to go from my side.

What I learnt?

  • How eslint config works?
  • How to override eslint config in apps through package.json
  • Writing jest tests
  • Debugging jest test suites
  • Difference between a smoke test and normal jest test
  • Jest cli test commands

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website at WordPress.com
Get started
%d bloggers like this: