import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Card from './Card';
import toJSON from 'enzyme-to-json';
Enzyme.configure({ adapter: new Adapter() });
describe('<Card />', () => {
it('renders <Card /> component', () => {
const card = shallow(
<Card
baseChance={1}
name={`test name`}
description={`long description`}
imageURL={'https://d2ph5fj80uercy.cloudfront.net/03/cat1425.jpg'}
id={0}
canBeIgnored={false}
isPassive={false}
/>
);
const snapshot = toJSON(card);
// for some reason snapshot.node.props.style.backgroundColor = "#cfc5f6"
// does not work, seems the prop is being set later
Object.defineProperty(snapshot.node.props.style, 'backgroundColor', { value: "#cfc5f6", writable: false });
// second expect statement is enaugh but this is the prop we care about:
expect(snapshot.node.props.style.backgroundColor).toBe("#cfc5f6");
expect(snapshot).toMatchSnapshot();
});
});
5条答案
按热度按时间oyxsuwqo1#
现在,您还可以使用属性匹配器来处理这些情况。
通过示例,可以对这些对象使用快照:
您可以使用:
Jest只会检查id是否为String,并照常处理快照中的其他字段。
0h4hbjxa2#
实际上,你需要模仿运动的部分。
如笑话文档所述:
您的测试应该是确定性的。也就是说,在未更改的组件上多次运行相同的测试,每次都应该生成相同的结果。您有责任确保生成的快照不包含平台特定的数据或其他非确定性数据。
如果是和时间有关的东西,你可以用
rn0zuynd3#
我知道这是一个很老的问题,但我知道还有一个解决方案。您可以修改想要忽略的属性,这样它将始终是常量,而不是随机/动态的。当您使用第三方代码时,这是最好的,因此可能无法控制非确定性属性的生成
示例:
f5emj3cl4#
您可以忽略快照测试中替换HTML中属性的部分。使用jest和testing-library,它看起来像这样:
ndasle7k5#
我用它来覆盖moment的
fromNow
,使快照具有确定性: