jest: 5 fail snapshots: 5 failed

[BaseMax]

root@maxbasecode:/var/www/html/salamlang.ir# git pull
Already up to date.

root@maxbasecode:/var/www/html/salamlang.ir#
root@maxbasecode:/var/www/html/salamlang.ir# bun test
bun test v1.1.29 (6d43b366)

src/components/common/__tests__/badge.test.jsx:
 5 | import {Badge} from '../Badge';
 6 |
 7 | it('renders correctly', () => {
 8 |   const tree = renderer
 9 |     .create(<Badge className="primary">آنلاین کار کن</Badge>).toJSON();
10 |   expect(tree).toMatchSnapshot();
                    ^
error: expect(received).toMatchSnapshot(expected)

Expected:
<span
  className="span bg-light-primary text-primary py-1 sm:py-2 px-2 sm:px-4 font-Estedad-Medium text-[10px] sm:text-xs rounded-full primary"
>
  آنلاین کار کن
</span>

Received:
{
  "$$typeof": Symbol(react.test.json),
  "children": [
    "آنلاین کار کن",
  ],
  "props": {
    "className": "span bg-light-primary text-primary py-1 sm:py-2 px-2 sm:px-4 font-Estedad-Medium text-[10px] sm:text-xs rounded-full primary",
  },
  "type": "span",
}

      at /var/www/html/salamlang.ir/src/components/common/__tests__/badge.test.jsx:10:16
✗ renders correctly [12.00ms]
11 | });
12 |
13 | it('renders correctly', () => {
14 |   const tree = renderer
15 |     .create(<Badge className="primary medium full">آنلاین کار کن</Badge>).toJSON();
16 |   expect(tree).toMatchSnapshot();
                    ^
error: expect(received).toMatchSnapshot(expected)

Expected:
<span
  className="span bg-light-primary text-primary py-1 sm:py-2 px-2 sm:px-4 font-Estedad-Medium text-[10px] sm:text-xs rounded-full primary medium full"
>
  آنلاین کار کن
</span>

Received:
{
  "$$typeof": Symbol(react.test.json),
  "children": [
    "آنلاین کار کن",
  ],
  "props": {
    "className": "span bg-light-primary text-primary py-1 sm:py-2 px-2 sm:px-4 font-Estedad-Medium text-[10px] sm:text-xs rounded-full primary medium full",
  },
  "type": "span",
}

      at /var/www/html/salamlang.ir/src/components/common/__tests__/badge.test.jsx:16:16
✗ renders correctly [1.00ms]
17 | });
18 |
19 | it('renders correctly', () => {
20 |   const tree = renderer
21 |     .create(<Badge intent="success">کوتاه بودن</Badge>).toJSON();
22 |   expect(tree).toMatchSnapshot();
                    ^
error: expect(received).toMatchSnapshot(expected)

Expected:
<span
  className="span bg-light-success text-success py-1 sm:py-2 px-2 sm:px-4 font-Estedad-Medium text-[10px] sm:text-xs rounded-full"
>
  کوتاه بودن
</span>

Received:
{
  "$$typeof": Symbol(react.test.json),
  "children": [
    "کوتاه بودن",
  ],
  "props": {
    "className": "span bg-light-success text-success py-1 sm:py-2 px-2 sm:px-4 font-Estedad-Medium text-[10px] sm:text-xs rounded-full",
  },
  "type": "span",
}

      at /var/www/html/salamlang.ir/src/components/common/__tests__/badge.test.jsx:22:16
✗ renders correctly [1.00ms]
23 | });
24 |
25 | it('renders correctly', () => {
26 |   const tree = renderer
27 |     .create(<Badge intent="warning">زیبا بودن</Badge>).toJSON();
28 |   expect(tree).toMatchSnapshot();
                    ^
error: expect(received).toMatchSnapshot(expected)

Expected:
<span
  className="span bg-light-warning text-warning py-1 sm:py-2 px-2 sm:px-4 font-Estedad-Medium text-[10px] sm:text-xs rounded-full"
>
  زیبا بودن
</span>

Received:
{
  "$$typeof": Symbol(react.test.json),
  "children": [
    "زیبا بودن",
  ],
  "props": {
    "className": "span bg-light-warning text-warning py-1 sm:py-2 px-2 sm:px-4 font-Estedad-Medium text-[10px] sm:text-xs rounded-full",
  },
  "type": "span",
}

      at /var/www/html/salamlang.ir/src/components/common/__tests__/badge.test.jsx:28:16
✗ renders correctly
29 | });
30 |
31 | it('renders correctly', () => {
32 |   const tree = renderer
33 |     .create(<Badge intent="danger">فارسی بودن</Badge>).toJSON();
34 |   expect(tree).toMatchSnapshot();
                    ^
error: expect(received).toMatchSnapshot(expected)

Expected:
<span
  className="span bg-light-danger text-danger py-1 sm:py-2 px-2 sm:px-4 font-Estedad-Medium text-[10px] sm:text-xs rounded-full"
>
  فارسی بودن
</span>

Received:
{
  "$$typeof": Symbol(react.test.json),
  "children": [
    "فارسی بودن",
  ],
  "props": {
    "className": "span bg-light-danger text-danger py-1 sm:py-2 px-2 sm:px-4 font-Estedad-Medium text-[10px] sm:text-xs rounded-full",
  },
  "type": "span",
}

      at /var/www/html/salamlang.ir/src/components/common/__tests__/badge.test.jsx:34:16
✗ renders correctly

 0 pass
 5 fail
 snapshots: 5 failed
 5 expect() calls
Ran 5 tests across 1 files. [102.00ms]

[jbampton]

I was running npm test -- -u to update the snapshots previously

https://jestjs.io/docs/snapshot-testing#interactive-snapshot-mode

[BaseMax]

we need to change npm to bun.

[jbampton]

https://jestjs.io/docs/snapshot-testing#updating-snapshots

[BaseMax]

okay you can add jest --updateSnapshot in action if you think we need it.

[jbampton]

You run that locally to update the snapshots.

The snapshots get uploaded to GitHub

[jbampton]

https://github.com/SalamLang/Salam-Website/blob/main/src/components/common/__tests__/__snapshots__/badge.test.jsx.snap

[jbampton]

Hey @BaseMax I think you mean to replace Jest with Bun ?

I see bun has snapshot testing here:

https://bun.sh/docs/test/snapshots

[BaseMax]

no we cannot replace jest with bun. jest is for testing and bun is a package manager similar to npm.

for running test in bun we can run: bun test

[BaseMax]

okay so we can update github action and use bun test --update-snapshots

[jbampton]

All fixed now thanks

[BaseMax]

thanks you