用Tohavestyle进行测试＆＃x27;期望失败时通过

Question

我正在学习测试和反应。我遇到了一些麻烦，理解为什么测试在不应该时通过：

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

请有人帮助我吗？

Answer 1

在这种情况下，用对象测试tohavestyle正在引起错误，我真的不知道为什么。您可能应该在测试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的其他选项