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.

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

Resolve warning message with test #1877

Closed
yangwooseong opened this issue Jan 4, 2024 · 0 comments
Closed

Resolve warning message with test #1877

yangwooseong opened this issue Jan 4, 2024 · 0 comments
Labels
enhancement Issues or PR related to making existing features better good first issue Issue that good for newcomers

Comments

@yangwooseong
Copy link
Collaborator

yangwooseong commented Jan 4, 2024

Summary

  • yarn test 혹은 yarn update-snapshot 실행시 다음과 같은 에러 메시지가 나와서 불필요한 로그가 찍힙니다.
    console.error
      Warning: An update to FeatureProvider inside a test was not wrapped in act(...).
      
      When testing, code that causes React state updates should be wrapped into act(...):
      
      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */
      
      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
          at children (/Users/mb-188/channel/bezier-react/packages/bezier-react/src/features/FeatureProvider.tsx:45:3)
          at window (/Users/mb-188/channel/bezier-react/packages/bezier-react/src/providers/WindowProvider.tsx:32:34)
          at children (/Users/mb-188/channel/bezier-react/packages/bezier-react/src/providers/AppProvider.tsx:57:3)
          at children (/Users/mb-188/channel/bezier-react/packages/bezier-react/src/utils/test.tsx:14:26)
  • 이런 에러가 안나오게 적절히 test.tsx에 있는 renderact를 감싸면 좋겠습니다.

추가)

위 warning은 FeatureProvider 안에서 if (!features) 를 if (!features.length) 로 변경하면 더이상 안뜨는 것을 확인했으나 다른 warning 도 있어서 같이 해결하면 좋을 듯 합니다

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? (CheckableAvatar.test.tsx) 

Warning: React does not recognize the `hasError` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `haserror` instead. If you accidentally passed it from a parent component, remove it from the DOM element. (Switch.test.tsx)

Warning: React does not recognize the `hasError` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `haserror` instead. If you accidentally passed it from a parent component, remove it from the DOM element. (RadioGroup.test.tsx)
@yangwooseong yangwooseong added enhancement Issues or PR related to making existing features better good first issue Issue that good for newcomers labels Jan 4, 2024
yangwooseong added a commit that referenced this issue Jan 11, 2024
<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

- #1877 

## Summary
<!-- Please brief explanation of the changes made -->

- `yarn test`실행 시 테스트 코드에서 나오는 warning message의 일부를 resolve합니다.
-
https://app.circleci.com/pipelines/github/channel-io/bezier-react/5804/workflows/c0aae4cd-38de-4423-a3fc-9480443ef7f9/jobs/22311
여기서 실행 결과를 보면, 성공한 테스트임에도 불구하고 굉장히 많은 경고 메시지가 테스트 결과에 포함되는 것을 볼 수 있습니다.
이런 불필요한 메시지가 로그에 포함되면 테스트 코드 결과를 파악하기도 어렵고, 경고 메시지 자체가 잠재적인 버그의 원인이기 때문에
결코 무시할 수 없습니다.
- 이번 작업으로 95%이상 경고 메시지를 줄였고, scss 마이그레이션 작업을 하면서 완전히 없애면 좋을 것 같습니다

## Details
<!-- Please elaborate description of the changes -->

- 에러 메시지의 원인은 아래와 같았습니다.
- jest test callback 함수 안에서 비동기 작업이 수행됨 -> 대부분의 로그를 차지하고 있는 문제로,
FeatureProvider 안에서 오타 수정하면 Promise 실행 안하게 됨

![image](https://github.com/channel-io/bezier-react/assets/28595102/7718e398-1669-40b2-8401-10df7fe2f45a)

- active="false" -> 정확한 원인은 아직 파악 안된 상태..

![image](https://github.com/channel-io/bezier-react/assets/28595102/661261e1-2ee9-45ea-a596-dc6f5c9a00be)

- Icon컴포넌트의 forwardRef -> 아마 styled(Icon) 으로 감싸고 나서 asChild로 인한 ref
forwarding이 안되는 이슈인 듯하여 scss로 마이그레이션 하면 해결 됫 것으로 예상

![image](https://github.com/channel-io/bezier-react/assets/28595102/44a06aec-2d2b-4f50-a4c3-bababb949cb7)

- ref forwarding 이 누락됨

![image](https://github.com/channel-io/bezier-react/assets/28595102/be545eee-ea39-4bd7-9d24-fcedcb5c3c95)

- hasError 속성을 잘못 넘김
(#1876 참고)

![image](https://github.com/channel-io/bezier-react/assets/28595102/7dffef91-da80-450d-bdcc-b2ed0dd0824f)


### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->
- No

## References
<!-- Please list any other resources or points the reviewer should be
aware of -->

-
https://davidwcai.medium.com/react-testing-library-and-the-not-wrapped-in-act-errors-491a5629193b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Issues or PR related to making existing features better good first issue Issue that good for newcomers
Projects
No open projects
Archived in project
Development

No branches or pull requests

1 participant