懸停按鈕不起作用時測驗不透明度。兩者都試過了userEvent.hover(hoverButton)
,fireEvent.mouseOver(hoverButton)
不幸的是結果是一樣的。同時,其他屬性正在運行,例如'cursor:not-allowed'
按鈕.js
import styled from 'styled-components';
const ButtonWrapper = styled.button`
color: #fff;
background-color: tomato;
font-size: 14px;
padding: 6px 30px;
height: 35px;
&:not(:disabled):hover {
opacity: 0.8;
background: red;
}
${({ disabled }) =>
disabled && `
opacity: 0.4;
cursor: not-allowed;
`}
`;
// background-color: ${(props) => props.theme.buttonColors[props.kind]};
const Button = ({ children, className, disabled, size = 'medium' }) => {
return <ButtonWrapper
className={className}
disabled={disabled}
onClick={() => console.log('Hello mate')}
size={size}
>{children}</ButtonWrapper>;
}
export default Button;
Button.test.js
import { fireEvent, render, screen } from '@testing-library/react';
import userEvent from "@testing-library/user-event";
import Button from './index';
test('should render button', () => {
render(<Button>Click on me</Button>);
expect(screen.getByText(/Click on me/i)).toBeInTheDocument();
});
test('should render disabled button', () => {
render(<Button disabled>hover on me</Button>);
const hoverButton = screen.getByRole('button');
expect(hoverButton).toBeDisabled();
expect(hoverButton).toHaveStyle('opacity: 0.4')
expect(hoverButton).toHaveStyle('cursor:not-allowed')
});
test('should hover button', () => {
render(<Button>hover on me</Button>);
// const hoverButton = screen.getByRole('button');
const hoverButton = screen.getByRole('button', { name: 'hover on me' });
userEvent.hover(hoverButton);
// fireEvent.mouseOver(hoverButton)
expect(hoverButton).toHaveStyle('opacity: 0.8')
expect(hoverButton).toHaveStyle(`background-color: #000`);
});
test('toMatchSnapshot', () => {
const { asFragment } = render(<Button>Click on me</Button>);
expect(asFragment()).toMatchSnapshot();
});
uj5u.com熱心網友回復:
問題
我發現你遇到了一些障礙:
- 測驗中有一個錯誤,當它在檔案中設定時
background-color
應該是這樣。#000
background: redu
Button.js
- 我非常有信心測驗庫的
hover
互動不會更新計算的樣式。我在 DOM 和測驗中使用getComputedStyle驗證了這一點。也就是說,您可以使用jest-styled-components 'toHaveStyleRule
來檢查偽樣式,但這并不能真正涵蓋您要測驗的內容。 - 目前,您實際上無法根據瀏覽器互動測驗按鈕的當前外觀,除非該互動使用某種 React 狀態或道具動態添加/洗掉樣式(類似于您所做的
disabled
)。結果,沒有辦法準確地確定它的外觀,因為每個Button
都有相同的偽樣式(快照展示了這一點,但查看 DOM 也會展示同樣的東西):
exports[`Button disabled snapshot 1`] = `
<DocumentFragment>
.c0 {
color: #fff;
background-color: tomato;
font-size: 14px;
padding: 6px 30px;
height: 35px;
opacity: 0.4;
cursor: not-allowed;
}
.c0:not(:disabled):hover {
opacity: 0.8;
background: red;
}
<button
disabled=""
>
Click on me
</button>
</DocumentFragment>
`;
exports[`Button enabled snapshot 1`] = `
<DocumentFragment>
.c0 {
color: #fff;
background-color: tomato;
font-size: 14px;
padding: 6px 30px;
height: 35px;
}
.c0:not(:disabled):hover {
opacity: 0.8;
background: red;
}
<button
>
Click on me
</button>
</DocumentFragment>
`;
推薦:
您無需針對 DOM 的原生互動/樣式更改進行測驗。相反,請針對您控制的內容進行測驗。在這種情況下,您正在控制是否可以禁用按鈕并根據該道具附加樣式。除了測驗(您已經完成)之外,在這種情況下,任何其他測驗都應被視為輔助/多余的。
退后一步,您到底想測驗什么?似乎您正在嘗試測驗瀏覽器是否可以通過特定的 CSS 選擇器將樣式應用于按鈕?這似乎相當不必要,不是嗎?
不建議:
這將測驗一個元素是否包含特定的偽樣式,但同樣,它是共享的,并且實際上無法確定其樣式何時處于活動狀態(即使您添加了disabled
按鈕道具,此測驗仍然會通過,因為它仍然包含偽樣式!):
test("should contain button hover styles", () => {
render(<Button>hover on me</Button>);
const hoverButton = screen.getByRole("button");
expect(hoverButton).toHaveStyleRule("opacity", "0.8", {
modifier: ":not(:disabled):hover",
});
expect(hoverButton).toHaveStyleRule("background", "red", {
modifier: ":not(:disabled):hover",
});
});
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/505166.html
標籤:javascript 反应 单元测试 测试 反应测试库