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