From 6e46dff0db71be0744aa19fe72910bf67c9d8c87 Mon Sep 17 00:00:00 2001 From: Adrian Bienias Date: Sat, 26 Feb 2022 15:34:19 +0100 Subject: [PATCH 1/3] docs: Describe random string case in snapshot testing https://github.com/facebook/jest/issues/8618#issuecomment-1052100053 --- docs/SnapshotTesting.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/SnapshotTesting.md b/docs/SnapshotTesting.md index 4eb064f3826e..1052cf6504a1 100644 --- a/docs/SnapshotTesting.md +++ b/docs/SnapshotTesting.md @@ -210,6 +210,18 @@ Object { `; ``` +If the case concerns a string not an object then you need to replace random part of that string on your own before testing the snapshot. +You can use for that e.g. [`replace()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) and [regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions). + +```javascript +const randomNumber = Math.round(Math.random() * 100); +const stringWithRandomData = `
Lorem ipsum
`; +const stringWithConstantData = stringWithRandomData.replace(/id="\d+"/, 123); +expect(stringWithConstantData).toMatchSnapshot(); +``` + +Another way is to [mock](https://jestjs.io/docs/mock-functions) a library responsible for generating the random part of the code you're snapshotting. + ## Best Practices Snapshots are a fantastic tool for identifying unexpected interface changes within your application – whether that interface is an API response, UI, logs, or error messages. As with any testing strategy, there are some best-practices you should be aware of, and guidelines you should follow, in order to use them effectively. From b587e7877b40f55df56bbcce5c8f2acfe6b1cd38 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Sat, 26 Feb 2022 22:21:18 +0100 Subject: [PATCH 2/3] Update docs/SnapshotTesting.md --- docs/SnapshotTesting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/SnapshotTesting.md b/docs/SnapshotTesting.md index 1052cf6504a1..fe33366e0922 100644 --- a/docs/SnapshotTesting.md +++ b/docs/SnapshotTesting.md @@ -220,7 +220,7 @@ const stringWithConstantData = stringWithRandomData.replace(/id="\d+"/, 123); expect(stringWithConstantData).toMatchSnapshot(); ``` -Another way is to [mock](https://jestjs.io/docs/mock-functions) a library responsible for generating the random part of the code you're snapshotting. +Another way is to [mock](MockFunctions.md) a library responsible for generating the random part of the code you're snapshotting. ## Best Practices From ade07479f77ef692313d8c6437a87dfd81ccb97e Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Sat, 26 Feb 2022 22:25:22 +0100 Subject: [PATCH 3/3] admonition --- docs/SnapshotTesting.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/SnapshotTesting.md b/docs/SnapshotTesting.md index fe33366e0922..c99ee848df13 100644 --- a/docs/SnapshotTesting.md +++ b/docs/SnapshotTesting.md @@ -210,6 +210,8 @@ Object { `; ``` +:::tip + If the case concerns a string not an object then you need to replace random part of that string on your own before testing the snapshot. You can use for that e.g. [`replace()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) and [regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions). @@ -220,7 +222,9 @@ const stringWithConstantData = stringWithRandomData.replace(/id="\d+"/, 123); expect(stringWithConstantData).toMatchSnapshot(); ``` -Another way is to [mock](MockFunctions.md) a library responsible for generating the random part of the code you're snapshotting. +Another way is to [mock](MockFunctions.md) the library responsible for generating the random part of the code you're snapshotting. + +::: ## Best Practices