Jest.js 如何在React测试库快照中包含完整对象？

bejyjqdl 于 2023-06-20 发布在 Jest

关注(0)|答案(1)|浏览(169)

我有一个React组件，它接受一个对象作为prop：

const Button = ({ customCss }) => (
  <div><AnotherChildComponent customCss={customCss} /></div>
)

在Jest（v29）中，我希望有一个快照测试来覆盖我传递给子组件的对象：

describe('<Button />', () => {
    let elem

    beforeAll(() => {
        const renderResult = render(<Button customCss={{ color: 'blue' }} />);
        elem = renderResult.container.firstChild
    })

    it('should have snapshot', () => {
        expect(elem).toMatchSnapshot();
    })
})

然而，我的快照并没有显示整个对象，它只是在我的对象上调用.toString()：

// Jest Snapshot v1,

exports[`<Button /> should have snapshot 1`] = `<div>
  <AnotherChildComponent
    customcss="[object Object]"
  />
</div>
`;

如何将Jest/Testing Library更改为JSON.stringify my prop而不是toString ing？
@testing-library/react@^14

jestjs

来源：https://stackoverflow.com/questions/76470570/how-to-include-full-objects-in-react-testing-library-snapshots

1条答案

按热度按时间

dxxyhpgq1#

您可以使用自定义序列化程序为快照配置JEST

在您的配置中：快照序列化器
或者在每个需要它的测试中：expect.addSnapshotSerializer

实际上，您可以提供生成快照输出的逻辑，因此如果您想使用JSON.stringify，您可以在自己的实现中实现它。
...或者，如果你发现JSON.stringify的输出足够了，你可以使用JSON.stringify内联：

// become a three-space indentation monster like me
// ...or don't, and change the third param to the number of spaces you want
expect(JSON.stringify(elem, undefined, 3)).toMatchSnapshot();

有关其签名的更多信息，请参见JSON.stringify

赞(0）回复(0）举报 2023-06-20

我来回答

Jest.js 如何在React测试库快照中包含完整对象？

1条答案

相关问题

热门标签

最新问答