我正在使用create-react-app
,并在React组件中编写了我的第一个测试,但无法正常工作。我没有在应用程序中安装任何其他软件包,因此默认情况下,我仅使用与create-react-app捆绑在一起的软件包。这是我的[[Button.js组件:
function Button(props) {
if(props.classes) {
for(let i = 0; i < props.classes.length; i++) {
btnClasses += `${props.classes[i]} `;
}
}
return (
<button className={btnClasses}>
{props.text}
</button>
);
}
组件本身起作用。我可以设置:text
和classes
道具并像这样使用它:
<Button text="My Button" classes={['myclass', 'myotherclass']} />
我想编写一个测试,当我通过一个作为道具时,检查按钮是否具有该类。这是我的
Button.test.js
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';
import Button from './Button';
let container = null;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
describe('Button', () => {
it('renders with classes', () => {
act(() => {
render(<Button classes={['myclass']} />, container);
});
expect(container.classList.contains('myclass')).toBe(true);
});
});
此测试失败,我不知道为什么。我的印象是您可以像任何其他DOM节点一样与container
进行交互。当我console.log(container.classList)
时,我得到一个空的DOMTokenList {}
。我想念什么?为什么此测试不起作用?
此示例将帮助您:https://airbnb.io/enzyme/docs/api/ReactWrapper/hasClass.html