您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
要使用Jest测试React组件的CSS in JS,你需要遵循以下步骤:
确保你已经安装了@testing-library/react
和@testing-library/jest-dom
。如果没有,请运行以下命令进行安装:
npm install --save @testing-library/react @testing-library/jest-dom
例如,我们创建一个简单的Button
组件,使用styled-components
库实现CSS in JS:
// Button.js
import React from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
background-color: ${(props) => props.primary ? 'blue' : 'white'};
color: ${(props) => props.primary ? 'white' : 'black'};
padding: 8px 16px;
`;
const Button = ({ primary, children }) => {
return (
<StyledButton primary={primary}>{children}</StyledButton>
);
};
export default Button;
在Button.test.js
文件中,编写测试用例以验证组件的样式是否正确应用:
// Button.test.js
import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';
describe('Button', () => {
it('renders a button with the correct styles', () => {
const { getByRole } = render(<Button>Click me</Button>);
const button = getByRole('button');
expect(button).toHaveStyle('background-color: white');
expect(button).toHaveStyle('color: black');
expect(button).toHaveStyle('padding: 8px 16px');
});
it('renders a primary button with the correct styles', () => {
const { getByRole } = render(<Button primary>Click me</Button>);
const button = getByRole('button');
expect(button).toHaveStyle('background-color: blue');
expect(button).toHaveStyle('color: white');
expect(button).toHaveStyle('padding: 8px 16px');
});
});
在命令行中运行npm test
或yarn test
以执行测试用例。
这样,你就可以使用Jest测试React组件的CSS in JS了。注意,这里的示例使用了styled-components
库,但你可以根据需要使用其他CSS in JS库。关键是确保你的测试用例能够验证组件的样式是否正确应用。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。