React Native 笑话快照测试:如何在jest测试结果中忽略部分快照文件

pw136qt2  于 2023-01-14  发布在  React
关注(0)|答案(5)|浏览(147)

问题:忽略.snap文件测试结果的某些部分
这里的问题是:有一些组件在我的测试那有一个随机的值并且我不真的关心测试他们.有任何方法到忽略我的部分X.snap文件?所以当我运行测试在这未来它不会给予我测试失败的结果.

oyxsuwqo

oyxsuwqo1#

现在,您还可以使用属性匹配器来处理这些情况。
通过示例,可以对这些对象使用快照:

const obj = {
  id: dynamic(),
  foo: 'bar',
  other: 'value',
  val: 1,
};

您可以使用:

expect(obj).toMatchSnapshot({
  id: expect.any(String),
});

Jest只会检查id是否为String,并照常处理快照中的其他字段。

0h4hbjxa

0h4hbjxa2#

实际上,你需要模仿运动的部分。
如笑话文档所述:
您的测试应该是确定性的。也就是说,在未更改的组件上多次运行相同的测试,每次都应该生成相同的结果。您有责任确保生成的快照不包含平台特定的数据或其他非确定性数据。
如果是和时间有关的东西,你可以用

Date.now = jest.fn(() => 1482363367071);
rn0zuynd

rn0zuynd3#

我知道这是一个很老的问题,但我知道还有一个解决方案。您可以修改想要忽略的属性,这样它将始终是常量,而不是随机/动态的。当您使用第三方代码时,这是最好的,因此可能无法控制非确定性属性的生成
示例:

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();
    });
});
f5emj3cl

f5emj3cl4#

您可以忽略快照测试中替换HTML中属性的部分。使用jest和testing-library,它看起来像这样:

it('should match snapshot', async () => {
  expect(removeUnstableHtmlProperties(await screen.findByTestId('main-container'))).toMatchSnapshot();
});

function removeUnstableHtmlProperties(htmlElement: HTMLElement) {
  const domHTML = prettyDOM(htmlElement, Infinity);
  if (!domHTML) return undefined;
  return domHTML.replace(/id(.*)"(.*)"/g, '');
}
ndasle7k

ndasle7k5#

我用它来覆盖moment的fromNow,使快照具有确定性:

import moment, {Moment} from "moment";

moment.fn.fromNow = jest.fn(function (this: Moment) {
  const withoutSuffix = false;
  return this.from(moment("2023-01-12T20:14:00"), withoutSuffix);
});

相关问题