React Component Testing Setup #1049

jiji14 · 2023-10-03T17:50:12Z

Setting up React Component Testing

testenvironment

To test React components, we need to change the environment from node to jsdom. Since we perform both non-UI function tests and UI function tests, it's better to change the environment in each component test file by adding a @jest-environment docblock at the beginning of the file.

Learn more: Jest Test Environment Configuration

transformIgnorePatterns

During testing, I encountered multiple errors related to node_modules. This is because some react-native libraries ship uncompiled ES5 code, but Jest requires ES6 code for testing. It's important to ensure that node_modules doesn't have to be transpiled during testing. I resolved this issue by adding transformIgnorePatterns.

Learn more: Jest Transform Ignore Patterns

Current issue with polyfills/error-guard.js

After adjusting transformIgnorePatterns, I resolved most of the node_modules errors. However, I still encountered an error related to polyfills/error-guard.js. This issue appears to be common, and several people have faced similar challenges. While there are suggestions available, nothing worked for my scenario.

The additional code in polyfills/error-guard.js is not Typescript, it is flow (flow is what FB uses instead of Typescript). We need to remove any flow syntax on the error-guard polyfill to run the test.

References:
React Native GitHub Issue
Stack Overflow Question
Jest GitHub Issue
Upgrade Support GitHub Issue

See [Issue e-mission#979](e-mission/e-mission-docs#979 (comment)) for more details. Only slight difference in comment; removed the `-0.2rem` in this commit, the buttons look crowded otherwise.

Updated the button to only appear if you can verify the trip. Button color now matches the "inferred trip" data.

…ept_2023 📈 👔 ✅ Dashboard rewrite (complete) + profile logic improvements + initial testing framework!

See conversation in PR `rem` doesn't work properly in react-native, updated Co-authored-by: Jack Greenlee <JackAGreenlee@gmail.com>

iconButtonProp & Border Color Changed prop to use native property, adjusted border color. Co-authored-by: Jack Greenlee <JackAGreenlee@gmail.com>

✓ Updated "Verify Inference" Checkmark

Some of the core React and React Native code is written in Flow, and the official, public packages have untranspiled Flow code. Bad! Jest can't understand this when it tries to test our React code. So unfortunately we have to transpile it ourselves before running tests, using Babel with a couple different presets and plugins - add babel.config.js - change Jest config from json -> js - add packages to support the Babel transpilation

JGreenlee · 2023-10-05T16:55:52Z

It was necessary to use Babel with Jest because otherwise, Jest cannot understand the Flow code that comes from the core React and React Native packages. (Why FB doesn't transpile it themselves before publishing it, I do not know.)
The Babel presets and plugins now used are: @babel/preset-env, @babel/preset-typescript, @babel/preset-react, and @babel/plugin-transform-flow-strip-types.

Since we are using Babel to TS transpilation, ts-jest is moot and can be removed.

…onger shipped by default

jiji14 · 2023-10-05T17:46:34Z

I also added "jest-environment-jsdom" in configuration since "jest-environment-jsdom" is no longer shipped by default.

Now we are ready for React Component testing! 🥳 🥳

ensured that tests still pass

with the changes from e-mission#1049, we are now able to test using i18n, no need to mock!

shankari

@jiji14 great job taking this on and getting it to work! I am really excited to merge this and make sure that we can start testing components.

This is almost ready to review - here are a couple of high level comments:

Can we document this some more?
- Is this the standard option to test react components?
- which other testing options did you consider?
- what was the reason for picking this one?
Can you also resolve the merge conflict so that I merge?

jest.config.js

jiji14 · 2023-10-16T19:29:01Z

@jiji14 great job taking this on and getting it to work! I am really excited to merge this and make sure that we can start testing components.

This is almost ready to review - here are a couple of high level comments:

Can we document this some more?

Is this the standard option to test react components?

which other testing options did you consider?

what was the reason for picking this one?

Can you also resolve the merge conflict so that I merge?

Updated the related issue (e-mission/e-mission-docs#996)

jiji14 · 2023-10-17T00:28:48Z

jest.config.json file was deleted, leading to a conflict error when attempting to resolve it. I tried adding the file with empty content and then removing it, but the conflict error still persists, and I find myself stuck with this issue 😢

@shankari, could you please delete the jest.config.json file when you merge this?

I followed the steps outlined in this Stack Overflow post for reference: Link to Stack Overflow

…-mission-phone into react-testing-setup

jiji14 · 2023-10-17T04:21:26Z

@JGreenlee
Thanks! How did you resolve the conflict with jest.config.json file?

JGreenlee · 2023-10-17T04:21:31Z

Just to make sure there was no other weirdness going on, I resolved the conflict myself just now.
@jiji14 Below, you can see the process by which I did this. There are many ways you can work with Git, including git commands or Github desktop, but the built-in source control tab in VSCode is my personal preference.

jiji14 · 2023-10-17T04:24:40Z

Just to make sure there was no other weirdness going on, I resolved the conflict myself just now. @jiji14 Below, you can see the process by which I did this. There are many ways you can work with Git, including git commands or Github desktop, but the built-in source control tab in VSCode is my personal preference.

I used the command and kept getting the same issue. This helps a lot! Thanks again

the-bay-kay and others added 8 commits September 28, 2023 14:23

Recentered & Resized "inferred trip" checkmark

7f6b737

See [Issue e-mission#979](e-mission/e-mission-docs#979 (comment)) for more details. Only slight difference in comment; removed the `-0.2rem` in this commit, the buttons look crowded otherwise.

Checkmark dynamically appears, color matches

d3f8970

Updated the button to only appear if you can verify the trip. Button color now matches the "inferred trip" data.

Merge pull request e-mission#1046 from e-mission/onboarding_routing_s…

8c12de7

…ept_2023 📈 👔 ✅ Dashboard rewrite (complete) + profile logic improvements + initial testing framework!

Update www/js/survey/multilabel/MultiLabelButtonGroup.tsx

6262d2e

See conversation in PR `rem` doesn't work properly in react-native, updated Co-authored-by: Jack Greenlee <JackAGreenlee@gmail.com>

Update www/js/survey/multilabel/MultiLabelButtonGroup.tsx

9c36f7d

iconButtonProp & Border Color Changed prop to use native property, adjusted border color. Co-authored-by: Jack Greenlee <JackAGreenlee@gmail.com>

Add testId for unit test

1e19ab2

Add LoadMoreButton component unit test

693361f

Change jest setup for component test

f0b3a3c

jiji14 marked this pull request as draft October 4, 2023 19:36

shankari and others added 2 commits October 4, 2023 21:07

Merge pull request e-mission#1047 from the-bay-kay/dynamic_checkmark

cc0e419

✓ Updated "Verify Inference" Checkmark

We need jest-environment-jsdom since "jest-environment-jsdom" is no l…

c159b2f

…onger shipped by default

jiji14 marked this pull request as ready for review October 5, 2023 17:46

Merge remote-tracking branch 'upstream/master' into service_rewrite_2023

b15a95c

Abby-Wheelis mentioned this pull request Oct 13, 2023

Rewrite answer.js into enketoHelper.ts #1063

Merged

Abby-Wheelis pushed a commit to Abby-Wheelis/e-mission-phone that referenced this pull request Oct 13, 2023

merge changes from e-mission#1049

496eeb5

ensured that tests still pass

Abby-Wheelis pushed a commit to Abby-Wheelis/e-mission-phone that referenced this pull request Oct 13, 2023

don't mock i18n, use the real thing

e7fe7a8

with the changes from e-mission#1049, we are now able to test using i18n, no need to mock!

shankari requested changes Oct 15, 2023

View reviewed changes

jest.config.js Show resolved Hide resolved

jiji14 marked this pull request as draft October 16, 2023 16:54

Merge branch 'service_rewrite_2023' into react-testing-setup

908cc50

jiji14 marked this pull request as ready for review October 16, 2023 23:34

jiji14 added 4 commits October 16, 2023 17:09

json.config.json

82f7be6

delete jest.config.json

6b59491

add file to resolve deleted file merge conflict

140ff67

delete jest.config.json

a289789

jiji14 force-pushed the react-testing-setup branch from bd2ccaa to a289789 Compare October 17, 2023 00:18

Merge branch 'service_rewrite_2023' of https://github.com/e-mission/e…

dd96275

…-mission-phone into react-testing-setup

JGreenlee mentioned this pull request Oct 17, 2023

🎛️ ControlHelper Rewrite #1052

Merged

jiji14 requested a review from shankari October 17, 2023 17:22

shankari approved these changes Oct 17, 2023

View reviewed changes

shankari merged commit e2a2fde into e-mission:service_rewrite_2023 Oct 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Component Testing Setup #1049

React Component Testing Setup #1049

jiji14 commented Oct 3, 2023 •

edited

Loading

JGreenlee commented Oct 5, 2023

jiji14 commented Oct 5, 2023

shankari left a comment

jiji14 commented Oct 16, 2023

jiji14 commented Oct 17, 2023 •

edited

Loading

jiji14 commented Oct 17, 2023

JGreenlee commented Oct 17, 2023

jiji14 commented Oct 17, 2023

React Component Testing Setup #1049

React Component Testing Setup #1049

Conversation

jiji14 commented Oct 3, 2023 • edited Loading

Setting up React Component Testing

testenvironment

transformIgnorePatterns

Current issue with polyfills/error-guard.js

JGreenlee commented Oct 5, 2023

jiji14 commented Oct 5, 2023

shankari left a comment

Choose a reason for hiding this comment

jiji14 commented Oct 16, 2023

jiji14 commented Oct 17, 2023 • edited Loading

jiji14 commented Oct 17, 2023

JGreenlee commented Oct 17, 2023

jiji14 commented Oct 17, 2023

jiji14 commented Oct 3, 2023 •

edited

Loading

jiji14 commented Oct 17, 2023 •

edited

Loading