预期失败时使用 'toHaveStyle' 进行的测试通过
Testing with 'toHaveStyle' passes when expecting fail
我正在学习测试和反应。我有点难以理解为什么测试在不应该通过的情况下通过了:
来自App.js
<button style={{backgroundColor: 'gray'}}>
Gray button
</button>
来自App.test.js
expect(colorButton).toHaveStyle( {backgroundColor: 'gray' }); // passes ok
expect(colorButton).toHaveStyle( {backgroundColor: 'fay' }); // passes but should not
expect(colorButton).toHaveStyle( {backgroundColor: 'dfhdhsdh' }); // passes but should not
expect(colorButton).toHaveStyle( {backgroundColor: 'red' }); // expected error
expect(colorButton).toHaveStyle( {backgroundColor: 'MidnightBlue' }); // expected error
关于该项目的更多信息:
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
有人能帮帮我吗?
看起来在这种情况下用 Object
测试 toHaveStyle
会导致错误,我真的不知道为什么。您可能应该在 testing-library/jest-dom github.
中打开一个问题
但是现在,如果你使用一个简单的字符串来测试背景应该可以工作,就像那样:
expect(colorButton).toHaveStyle("background-color: gray");
和完整的测试:
test("background test", () => {
const { getByRole, debug } = render(<App />);
// To check what jest-dom is rendered, debug is always a good idea.
// And here you will see that button is rendering with style="background-color: gray;"
debug();
const colorButton = getByRole("button");
expect(colorButton).toHaveStyle("background-color: gray");
expect(colorButton).not.toHaveStyle("background-color: fay");
expect(colorButton).not.toHaveStyle("background-color: dfhdhsdh");
expect(colorButton).not.toHaveStyle("background-color: red");
});
您可以检查 toHaveStyle
here 的其他选项。
我正在学习测试和反应。我有点难以理解为什么测试在不应该通过的情况下通过了:
来自App.js
<button style={{backgroundColor: 'gray'}}>
Gray button
</button>
来自App.test.js
expect(colorButton).toHaveStyle( {backgroundColor: 'gray' }); // passes ok
expect(colorButton).toHaveStyle( {backgroundColor: 'fay' }); // passes but should not
expect(colorButton).toHaveStyle( {backgroundColor: 'dfhdhsdh' }); // passes but should not
expect(colorButton).toHaveStyle( {backgroundColor: 'red' }); // expected error
expect(colorButton).toHaveStyle( {backgroundColor: 'MidnightBlue' }); // expected error
关于该项目的更多信息:
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
有人能帮帮我吗?
看起来在这种情况下用 Object
测试 toHaveStyle
会导致错误,我真的不知道为什么。您可能应该在 testing-library/jest-dom github.
但是现在,如果你使用一个简单的字符串来测试背景应该可以工作,就像那样:
expect(colorButton).toHaveStyle("background-color: gray");
和完整的测试:
test("background test", () => {
const { getByRole, debug } = render(<App />);
// To check what jest-dom is rendered, debug is always a good idea.
// And here you will see that button is rendering with style="background-color: gray;"
debug();
const colorButton = getByRole("button");
expect(colorButton).toHaveStyle("background-color: gray");
expect(colorButton).not.toHaveStyle("background-color: fay");
expect(colorButton).not.toHaveStyle("background-color: dfhdhsdh");
expect(colorButton).not.toHaveStyle("background-color: red");
});
您可以检查 toHaveStyle
here 的其他选项。