Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Test] Investigate and fix " [React Intl] Could not find required intl object" console error for unit tests #593

Closed
ananzh opened this issue Jul 8, 2021 · 2 comments
Closed

[Test] Investigate and fix " [React Intl] Could not find required intl object" console error for unit tests #593

ananzh opened this issue Jul 8, 2021 · 2 comments
Assignees
@ananzh
Labels
test:unit v1.1.0

Comments

@ananzh
Copy link
Member

ananzh commented Jul 8, 2021

Describe the issue

Currently, we observe the following console error when run unit tests. To make a clean unit test, we want to explore the reasons for these errors/warnings and decide whether we could fix or remove them.

  console.error
    [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry. Using default message as fallback.

Here is a list of all the unit test suites which have the above issue:

  • src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx
  • src/plugins/index_pattern_management/public/components/field_editor/components/scripting_call_outs/warning_call_out.test.tsx
  • src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.test.tsx
  • src/core/public/core_app/status/components/server_status.test.tsx
  • src/core/public/application/ui/app_container.test.tsx
  • src/plugins/vis_default_editor/public/components/controls/percentiles.test.tsx
  • src/core/public/overlays/banners/user_banner_service.test.ts
  • src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.test.tsx

To Reproduce
Run:yarn test:jest {path to the above test}

Expected behavior

explore each problem unit test cases and investigate each question:

  • what causes the console error or issues?

  • should this unit test log this error or warning message?

  • if answer to the above question is no, then can we fix it?

The final output is expected to be a cleaned unit test with un-necessary error/warnings been removed.

OpenSearch Version
OpenSearch 1.0.0

Dashboards Version
Dashboards 1.0.0
@ananzh ananzh self-assigned this Jul 8, 2021
@ananzh
Copy link
Member Author

ananzh commented Jul 8, 2021

This will partically solve issue #555

@ananzh ananzh changed the title [Test] Fix " [React Intl] Could not find required intl object" console error for unit tests [Test] Investigate and fix " [React Intl] Could not find required intl object" console error for unit tests Jul 8, 2021
ananzh added a commit to ananzh/OpenSearch-Dashboards that referenced this issue Jul 16, 2021
@ananzh
[Test] Wrap FunComponent in unit test with IntlProvider
01abc18 
In the FunctionComponent unit tests, we see many console errors:
`Could not find required intl object. <IntlProvider> needs to
exist in the component ancestry. `

This is because for some unit tests, we mount the FunctionComponent
(with Enzyme's mount()) , which access to the react-intl context by
FormattedMessage without their <IntlProvider /> parent wrapper.

This PR solves 7 out of 8 unit tests with this issue by wrapping the
<IntlProvider /> either through original enzyme_helper functions or
a simple wrapper wrapWithIntl.

Partically Resolved:
opensearch-project#593

Signed-off-by: Anan Zhuang <[email protected]>
ananzh added a commit to ananzh/OpenSearch-Dashboards that referenced this issue Jul 16, 2021
@ananzh
[Test] Wrap FunComponent in unit test with IntlProvider
4af7777 
In the FunctionComponent unit tests, we see many console errors:
`Could not find required intl object. <IntlProvider> needs to
exist in the component ancestry. `

This is because for some unit tests, we mount the FunctionComponent
(with Enzyme's mount()) , which access to the react-intl context by
FormattedMessage without their <IntlProvider /> parent wrapper.

This PR solves 7 out of 8 unit tests with this issue by wrapping the
<IntlProvider /> either through original enzyme_helper functions or
a simple wrapper wrapWithIntl.

Partically Resolved:
opensearch-project#593

Signed-off-by: Anan Zhuang <[email protected]>
@ananzh ananzh mentioned this issue Jul 16, 2021
Merged
5 tasks
ananzh added a commit to ananzh/OpenSearch-Dashboards that referenced this issue Jul 23, 2021
@ananzh
[1.0][Test] Wrap FunComponent in unit test with IntlProvider
f01ed9a 
In the FunctionComponent unit tests, we see many console errors:
`Could not find required intl object. <IntlProvider> needs to
exist in the component ancestry. `

This is because for some unit tests, we mount the FunctionComponent
(with Enzyme's mount()) , which access to the react-intl context by
FormattedMessage without their <IntlProvider /> parent wrapper.

This PR solves 7 out of 8 unit tests with this issue by wrapping the
<IntlProvider /> either through original enzyme_helper functions or
a simple wrapper wrapWithIntl.

Partically Resolved:
opensearch-project#593

Backport PR:
opensearch-project#654

Signed-off-by: Anan Zhuang <[email protected]>
ananzh added a commit to ananzh/OpenSearch-Dashboards that referenced this issue Jul 23, 2021
@ananzh
[1.x][Test] Wrap FunComponent in unit test with IntlProvider
5857a22 
In the FunctionComponent unit tests, we see many console errors:
`Could not find required intl object. <IntlProvider> needs to
exist in the component ancestry. `

This is because for some unit tests, we mount the FunctionComponent
(with Enzyme's mount()) , which access to the react-intl context by
FormattedMessage without their <IntlProvider /> parent wrapper.

This PR solves 7 out of 8 unit tests with this issue by wrapping the
<IntlProvider /> either through original enzyme_helper functions or
a simple wrapper wrapWithIntl.

Partically Resolved:
opensearch-project#593

Backport PR:
opensearch-project#654

Signed-off-by: Anan Zhuang <[email protected]>
@ananzh ananzh mentioned this issue Jul 23, 2021
Merged
5 tasks
@ananzh ananzh closed this as completed in b9eb9c6 Jul 23, 2021
@ananzh ananzh reopened this Jul 23, 2021
ananzh added a commit that referenced this issue Jul 23, 2021
@ananzh
[1.x][Test] Wrap FunComponent in unit test with IntlProvider (#661)
cff01f8 
In the FunctionComponent unit tests, we see many console errors:
`Could not find required intl object. <IntlProvider> needs to
exist in the component ancestry. `

This is because for some unit tests, we mount the FunctionComponent
(with Enzyme's mount()) , which access to the react-intl context by
FormattedMessage without their <IntlProvider /> parent wrapper.

This PR solves 7 out of 8 unit tests with this issue by wrapping the
<IntlProvider /> either through original enzyme_helper functions or
a simple wrapper wrapWithIntl.

Partically Resolved:
#593

Backport PR:
#654

Signed-off-by: Anan Zhuang <[email protected]>
@kavilla
Copy link
Member

kavilla commented Jul 26, 2021

Can be closed now right @ananzh ?

@ananzh ananzh closed this as completed Aug 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ananzh ananzh

Labels
test:unit v1.1.0
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kavilla @ananzh