Javascript 反应dom-更新到。。。测试的内部并没有包含在act中（…）

我有以下组件，它使用

useffect

hook-on-mount从外部API加载数据：

import React, { useEffect, useState } from "react";
import Dropdown from "./common/Dropdown";

import { getWeapons } from "../services/gear";

import { DropdownOptionType } from "./common/Dropdown";

const EMPTY_OPTION = {
  key: "0",
  label: "",
  value: "null"
};

const Gear = () => {
  const [weaponOptions, setWeaponOptions] = useState([EMPTY_OPTION]);
  const [weapon, setWeapon] = useState("null");

  useEffect(() => {
    const fetchWeaponsOptions = async (): Promise<void> => {
      const weaponsData = await getWeapons();
      const newWeaponOptions: DropdownOptionType[] = [
        EMPTY_OPTION,
        ...weaponsData.map(({ id, name }) => {
          return {
            key: id,
            label: name,
            value: id
          };
        })
      ];
      setWeaponOptions(newWeaponOptions);
    };

    fetchWeaponsOptions();
  }, []);

  // TODO add weapon dropdown on change, selected weapon state
  const handleWeaponChange = ({ value }: DropdownOptionType): void => {
    setWeapon(value);
  };

  return (
    <div>
      <h2>Gear:</h2>
      <Dropdown
        defaultValue={weapon}
        label="Weapon"
        name="weapon"
        options={weaponOptions}
        onChange={handleWeaponChange}
      />
    </div>
  );
};

export default Gear;

我尝试将测试代码包装到act回调中，但得到了相同的警告：

test("renders app title", () => {
  act(() => {
    const { getByText } = render(<App />);
    const titleElement = getByText(/Untitled combat game character creator/i);
    expect(titleElement).toBeInTheDocument();
  });
});

test（“呈现应用程序标题”，（）=>{
行动（（）=>{
const{getByText}=render（）；
const titleElement=getByText（/Untitled战斗游戏角色创建者/i）；
expect（titleElement）.toBeInTheDocument（）；
});
});

以及：

test（“呈现应用程序标题”，（）=>{
让滴定法；
行动（（）=>{
const{getByText}=render（）；
titleElement=getByText（/Untitled战斗游戏角色创建者/i）；
});
expect（titleElement）.toBeInTheDocument（）；
});

---

但在这两种情况下，我都得到了同样的警告。处理这个问题的正确方法是什么？

@AneesMuhammed解决了这个问题，尽管正确的语法是

wait act（async（）=>{…}

。如果你将它作为一个答案发布，并简要解释为什么它是正确的，我会接受它：）如果你有工作代码，你能添加自己的答案吗@Anees的评论被删除了

import React from "react";
import { render } from "@testing-library/react";
import App from "./App";

test("renders app title", () => {
  const { getByText } = render(<App />);
  const titleElement = getByText(/Untitled combat game character creator/i);
  expect(titleElement).toBeInTheDocument();
});

console.error node_modules/react-dom/cjs/react-dom.development.js:530
  Warning: An update to Gear 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 ...
      in Gear (at App.tsx:11)
      in div (at App.tsx:8)
      in App (at App.test.tsx:6)

test("renders app title", () => {
  act(() => {
    const { getByText } = render(<App />);
    const titleElement = getByText(/Untitled combat game character creator/i);
    expect(titleElement).toBeInTheDocument();
  });
});

test("renders app title", () => {
  let titleElement;
  act(() => {
    const { getByText } = render(<App />);
    titleElement = getByText(/Untitled combat game character creator/i);
  });
  expect(titleElement).toBeInTheDocument();
});