React-Testing-libraryでのテストでWarning警告文を無くしたい

Question

前提・実現したいこと

現在、ポートフォリオ を作成中で、React-Testing-Libraryを使って、テストコードを記述しています。
画像ファイルのアップロードが正しく行われているか？のテストをググりながら実装し、記載したところ、
テストはパスするものの、以下の警告文が発生してしまいました。

独学初学者で基礎が未熟ですが、この警告文が出ないようにするための方策をご教授いただけるとありがたいです。

発生している問題・エラーメッセージ

Warning: You seem to have overlapping act() calls, this is not supported. 
Be sure to await previous act() calls before making a new one.

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


      83 |                 <Image src={!avatar.data ? "gibbresh.png" : avatar.data} fallbackSrc="https://via.placeholder.com/250" boxSize={{ base: "250px", md: "300px" }} borderRadius="full" textAlign="center" border="2px" borderColor="gray.200"/>
      84 |               </Stack>
    > 85 |               <Stack>
         |         ^
      86 |                 <Input type="file" placeholder="画像アップロード" name="avatar"  id="avatar" accept="image/png,image/jpeg" onChange={handleImageSelect} />
      87 |               </Stack>

該当のソースコード

テストするReactのコード

import React, { memo, useState } from "react";
import { Box, Divider, Flex, Heading, Input, Stack, Text, Image, FormLabel } from "@chakra-ui/react";
import styled from 'styled-components';
import { useForm } from 'react-hook-form';
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

import { useSignup } from "../hooks/useSignup";

const schema = yup.object().shape({
  name: yup.string().max(50,"名前は50文字以内で入力して下さい").required("名前は必須です"),
  email: yup.string().email('正しいメールアドレスを入力してください').required("emailは必須です"),
  password: yup.string().min(4,"passwordは4文字以上で入力して下さい").max(15,"passwordは15文字以内で入力して下さい").required("パスワードは必須です"),
  password_confirmation: yup.string().oneOf([yup.ref("password"), null], '再入力passwordが一致しません'),
});

export const Signup = memo(() => {
  const { signup } = useSignup();
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema),
  });

  const [avatar, setAvatar] = useState({ data: "", name: "" })

  const onSubmit = (data) => {
    signup(data,avatar);
  }

  const handleImageSelect = (e) => {
    const reader = new FileReader()
    const files = (e.target).files
    if (files) {
      reader.onload = () => {
        setAvatar({
          data: reader.result,
          name: files[0] ? files[0].name : "unknownfile"
        })
      }
      reader.readAsDataURL(files[0])
    }
  }
  return (
    <>
      <Flex mt="80px" alignItems="center" justifyContent="center">
        <Box bg="white" w="sm" p={4} borderRadius="md" shadow="md">
          <Heading as="h1" size="lg" textAlign="center">
            新規登録
          </Heading>
          <Divider my={4} />
          <form onSubmit={handleSubmit(onSubmit)}>
            <Stack spacing={6} py={4} px={5}>
              <Input type="text" placeholder="name" {...register("name")} />
              <Text fontSize="md" color="red"> {errors.name?.message} </Text>
              
              <Input
                type="text" placeholder="email" {...register("email")}/>
              <Text fontSize="md" color="red"> {errors.email?.message} </Text>
              <Input
                type="password" placeholder="password"  {...register("password")}/>
              <Text fontSize="md" color="red"> {errors.password?.message} </Text>
              <Input type="password" placeholder="password(確認用)" {...register("password_confirmation")}/>
              <Text fontSize="md" color="red"> {errors.password_confirmation?.message} </Text>
              
              <Stack>
                <FormLabel color="gray.500" htmlFor="avatar" mt="4" mb="-2" fontSize={{ base: "sm", md: "md" }}>アバター写真</FormLabel>
                <Image src={!avatar.data ? "gibbresh.png" : avatar.data} fallbackSrc="https://via.placeholder.com/250" boxSize={{ base: "250px", md: "300px" }} borderRadius="full" textAlign="center" border="2px" borderColor="gray.200"/>
              </Stack>
              <Stack>
                <Input type="file" placeholder="画像アップロード" name="avatar"  id="avatar" accept="image/png,image/jpeg" onChange={handleImageSelect} />
              </Stack>
              <SSubmit
                type="submit"
                value="新規登録"
              />
            </Stack>
          </form>
        </Box>
      </Flex>
    </>
  );
});

fileのアップロードテストのコード

describe('readFileAsDataURL()', () => {
  it('upload file', async() => {
    render(<Signup />)
    const file = new File(['hello'], 'hello.png', { type: 'image/png' })
    const input = screen.getByLabelText("アバター写真")
      userEvent.upload(input, file)
    
    expect(input.files[0]).toStrictEqual(file)
    expect(input.files.item(0)).toStrictEqual(file)
    expect(input.files).toHaveLength(1)
    });
});

参考にしたテストコードはこちらです
testing-library公式
https://testing-library.com/docs/ecosystem-user-event/#uploadelement-file--clickinit-changeinit--options

試したこと

①まずは警告文でググりました
https://github.com/testing-library/react-testing-library/issues/605

ここでの問題は、コードがfindBy *クエリの結果を待っていないことだと思います。
また、テスト関数は非同期である必要があります。
と記載を見つけました。

そこで

 it('upload file', async() => {
    render(<Signup />)
    const file = new File(['hello'], 'hello.png', { type: 'image/png' })
    const input = screen.getByLabelText("アバター写真")
      userEvent.upload(input, file)
    
    await expect(input.files[0]).toStrictEqual(file)
    await expect(input.files.item(0)).toStrictEqual(file)
    await expect(input.files).toHaveLength(1)
    });

とawaitを記述したところ何も変わりませんでした。

②警告文の指示通り、Reactの公式でactについて調べました
https：//reactjs.org/link/wrap-tests-with-act

いまいち理解できてませんが、公式の例を参考に、

it('upload file', async() => {
    render(<Signup />)
    const file = new File(['hello'], 'hello.png', { type: 'image/png' })
    const input = screen.getByLabelText("アバター写真")
    act(()=>{
      userEvent.upload(input, file)
    })
    await expect(input.files[0]).toStrictEqual(file)
    await expect(input.files.item(0)).toStrictEqual(file)
    await expect(input.files).toHaveLength(1)
    });

こうしたところ、でも何も変化なしでした。

③どこに原因があるのかをはっきりさせるため、
コメントアウトしながら警告が出るか調べたところ

      userEvent.upload(input, file) 

この記述が警告文を出していることが判明しました。
（この文をコメントアウトすると警告が止まるので。）

正直、これ以上次の手が考えられていません。
お知恵をいただけるとありがたいです

補足情報（FW/ツールのバージョンなど）

"react": "^17.0.2",
"devDependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react-hooks": "^7.0.2",
    "msw": "^0.35.0",
    "react-test": "^0.10.2"

Answer 1

stateを変更するような操作は、actのコールバックの中から行う必要があります。

act(() => {
  userEvent.upload(input, file);
});

Comments

[kiyomasa]

ご教授いただきありがとうございます。
そのような書き方で記載も行いましたが、ワーニングは変わりませんでした...

[maisumakun]

エラーメッセージに書かれているように、await act(後略としてみたら、どうなりますか？

[kiyomasa]

このように記載しました。

```
await act(() => {
userEvent.upload(input, file);
});
```

すると同じワーニングが出たのに加えて、別のワーニングが発生しました。

```
Warning: Do not await the result of calling act(...) with sync logic, it is not a Promise.
```

[maisumakun]

すみません、ちょっとわからない状況です。

Answer 2

テストコードを以下のようにしたところ解決しました。

await act(async() => {
      userEvent.upload(input, file);
    });

    await waitFor(() => {
      expect(input.files[0]).toStrictEqual(file)
      expect(input.files.item(0)).toStrictEqual(file)
      expect(input.files).toHaveLength(1)
    });

actにasyncを入れてかつ、
waitForで関数実行を待つことで警告文は出なくなりました。

ありがとうございました。