jest-snapshot-propifier

Reduce the size of snapshots while also encouraging atomic testing practices.

- createMock
- Setup (div)
- With no props
- With basic props
- With objects as props
- With functions as props
- With components as props
- With basic children
- With components as children
- Setup (span)
- snapshotOf
- Basic use case
- With useEffect
- create
- Basic use case

createMock

returns: jest.Mock

Props and children are represented in a uniform and logical way. Props which require further testing are highlighted within the snapshot. Components are replaced with either divs or spans which have data-attributes set as the props which have been passed in.

$3

/Bar/__mocks__/index.ts

``js
import { createMock } from "jest-snapshot-propifier";

export const Foo = createMock({ name: "Bar" });
`

/Foo/index.ts

`js
export const Foo = (props) => ;
`

/Foo/spec.tsx

$3

`js
test("With no props", () => {
expect(snapshotOf()).toMatchInlineSnapshot(
data-component=""
/>
);
});
`

$3

`js
test("With basic props", () => {
expect(snapshotOf())
.toMatchInlineSnapshot(
data-component=""
data-number={42}
data-string="string"
/>
);
});
`

$3

`js
test("With objects as props", () => {
const muchWow = {
string: "string",
number: 42,
object: { much: "wow" },
};

expect(snapshotOf()).toMatchInlineSnapshot(
data-component=""
data-object="{\\"string\\":\\"string\\",\\"number\\":42,\\"object\\":{\\"much\\":\\"wow\\"}}"
/>
);
});
`

$3

`js
test("With functions as props", () => {
expect(snapshotOf( "function"} />))
.toMatchInlineSnapshot(
data-component=""
data-function="[! Function to test !]"
/>
);
const mockedBar = Bar as jest.Mock;

const [[barProps]] = mockedBar.mock.calls;

expect(barProps.function()).toBe("function");
});
`

$3

`js
test("With components as props", () => {
const InnerFoo = createMock({ name: "InnerFoo" });

expect(snapshotOf(} />))
.toMatchInlineSnapshot(
data-component=""
data-weird_flex="[! Component to test !]"
/>
);

const mockedBar = Bar as jest.Mock;

const [[barProps]] = mockedBar.mock.calls;
const WeirdFlex = () => barProps.weirdFlex;

expect(snapshotOf()).toMatchInlineSnapshot(
data-component=""
/>
);
});
`

$3

`js
test("With basic children", () => {
expect(snapshotOf(children)).toMatchInlineSnapshot(
data-component=""
>
children