条件渲染元素的测试不起作用

Question

我是测试应用程序的初学者。我目前遇到一个错误，我无法弄清楚是什么原因造成的。你们能帮帮我吗？我基本上必须测试单击按钮时元素是否会显示在屏幕上。

问候组件

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>
  );
}

失败的测试

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();
  });
})

错误描述

问候语组件 › 呈现“已更改！”如果单击按钮

无法找到带有文本的元素：已更改！。这可能是因为文本被多个元素打断了。在这种情况下，您可以为您的文本匹配器提供一个函数，使您的匹配器更加灵活。

问候组件 › 如果单击按钮则不会呈现“很高兴见到你”

 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"
  }
}

Answer 1

它不起作用，因为您没有考虑到您的

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();
  });
});