codeforjapan / hackdays

Next version of Social Hackday website.
hackdays-c4j.vercel.app
6 stars 0 forks source link

Feature/33 add unit tests #50

Closed halsk closed 2 years ago

halsk commented 2 years ago

Add a unit test for EditableProperty.tsx

But it is not the expected result.

Below error was fixed by 565df4ec6e8a24a501515b80f0401feeb71c5cd7

yarn test:ci shows errors

yarn run v1.22.17
$ jest --coverage
 PASS  __test__/atoms/button/PrimaryButton.test.tsx
 PASS  __test__/molecules/forms/EditableProperty.test.tsx
  ● Console

    console.log

      at canceled (src/components/molecules/forms/EditableProperty.tsx:58:13)
          at Array.some (<anonymous>)

    console.error
      Warning: An update to foo 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 foo (/Users/hal/Documents/workspace/supabase-test/src/components/molecules/forms/EditableProperty.tsx:53:11)
          at WrapperComponent (/Users/hal/Documents/workspace/supabase-test/node_modules/@wojtekmaj/enzyme-adapter-utils/src/createMountWrapper.jsx:46:26)

      65 |       .then()
      66 |       .catch((error) => {
    > 67 |         setErrorMessage(error.message);
         |         ^
      68 |       });
      69 |   }
      70 |   useEffect(() => { 

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:24064:9)
      at setErrorMessage (node_modules/react-dom/cjs/react-dom.development.js:16135:9)
      at src/components/molecules/forms/EditableProperty.tsx:67:9

I couldn't find a good way for rendering error text

I wanted to wait for rendering of setErrorMessage() of EditableProperty.tsx:67, but I can't find a good way to do it. Using setTimeout solved it but it is not the ideal way.

__test__/molecules/forms/EditableProperty.test.tsx:107

    /* blow test is failed
        expect(app.find('Text.errors').text()).toEqual('error text');
     */
    await function () {
      setTimeout(() => {
        expect(app.find('Text.errors').text()).toEqual('error text');
      }, 100);
    };