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
Kartik in Open Source 