说到测试应用程序,我还是个初学者.我现在遇到了一个错误,我不知道是什么原因导致了这个错误.你们能帮我个忙吗?我基本上必须测试当按钮被点击时,元素是否会显示在屏幕上.

Greeting Component

export default function Greeting() {
  const [changedText, setChangedText] = useState(false);

  function changeTextHandler() {
    setChangedText(true);
  }

  return (
    <div>
      <h2>Hello World!</h2>
      {!changedText && <p>It's good to see you!</p>}
      {changedText && <p>Changed!</p>}
      <button onClick={changeTextHandler}>Change Text!</button>
    </div>
  );
}

Tests with FAIL

describe("Greeting component", () => {
  test('renders "Changed!" if the button was clicked', () => {
  
    render(<Greeting />);

    const buttonElement = screen.getByRole("button");
    userEvent.click(buttonElement);

    const outputElement = screen.getByText("Changed!");
    expect(outputElement).toBeInTheDocument();
  });

  test('does not render "good to see you" if the button was clicked', () => {

    render(<Greeting />);

    const buttonElement = screen.getByRole("button");
    userEvent.click(buttonElement);

    const outputElement = screen.queryByText("good to see you", {
      exact: false,
    });
    expect(outputElement).toBeNull();
  });
})

Error descriptions

Greeting component › renders "Changed!" if the button was clicked

找不到文本为:已更改!的元素.这可能是因为文本由多个元素组成.在这种情况下,您可以为您的文本匹配器提供一个函数,使您的匹配器更加灵活.

Greeting component › does not render "good to see you" if the button was clicked

 expect(received).toBeNull()

 Received: <p>It's good to see you!</p>

Package.json

{
  "name": "testes",
  "private": true,
  "version": "0.0.0",
  "type": "commonjs",
  "scripts": {
    "dev": "vite",
    "test": "jest",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "vite": "^4.2.0"
  }
}

推荐答案

它不起作用,因为您没有考虑到您的userEvent.click(buttonElement);个调用是异步的.

您需要等待它们完成:

await userEvent.click(buttonElement);

由于我们使用的是await,因此还需要使测试函数为异步:

describe("Greeting component", () => {
  test('renders "Changed!" if the button was clicked', async () => {
    render(<Greeting />);

    const buttonElement = screen.getByRole("button");
    await userEvent.click(buttonElement);

    const outputElement = screen.getByText("Changed!");
    expect(outputElement).toBeInTheDocument();
  });

  test('does not render "good to see you" if the button was clicked', async () => {
    render(<Greeting />);

    const buttonElement = screen.getByRole("button");
    await userEvent.click(buttonElement);

    const outputElement = screen.queryByText("good to see you", {
      exact: false
    });
    expect(outputElement).toBeNull();
  });
});

Reactjs相关问答推荐

MUImaterial -ui-如何将文本字段和 Select 分组?

为什么我的标签在Redux API中不能正常工作?

避风港访问端口以包含Reaction应用程序

使用Thattle和Use Effect setTimeout进行搜索有什么不同

Formik验证不适用于物料UI自动完成

导致useState中断的中断模式

在数组对象内的数组上进行映射

在Reaction中导入';图片&文件夹时出错

找不到名称setCometChat

列表中的每个子项都应该有一个唯一的keyprops .在react 应用程序中

当 URL 与我声明的任何路由都不匹配时,如何使用不会重定向到错误页面的动态 URL? - react 路由 dom

我无法通过 useContext 显示值

React 无效的钩子调用:如何避免嵌套钩子?

无法使用 MongoDB Atlas 和 Next.js 删除正确的帖子

useEffect内部的RETURN语句在首次按钮点击事件中似乎无效的原因是什么?

文本的几个词具有线性渐变 colored颜色 - React native

如何防止开发人员使用 ESLint 在 React 项目中使用特定的钩子?

为什么 state redux-toolkit 是代理?

链接的音译 Gatsby JS

有没有办法只针对 React map 中的一个按钮?