如何使用 Jest/React 测试库测试 Material UI“错误”颜色（红色）

Question

我有

<AppBar position='relative' color='error' data-testid='appbar'>
   ...
</AppBar>

并想测试

test('Appbar background color must be red', () => {
    render(<App />)
    const element = screen.getByTestId('appbar')
    expect(element).toHaveStyle(???)

})

的??? 部分是我不确定要放什么的地方

Answer 1

使用toHaveClass而不是toHaveStyle并在材质 UI 方面添加适当的 class。

test('Appbar background color must be red', () => {
    render(<App />);

    const element = screen.getByTestId('appbar')
    expect(element).toHaveClass("MuiAppBar-colorError");
});

Live Preview 实时预览演示