Use a different testing strategy

Oct 13, 2025 by thesweetdesigns.com 125 views

Issue Summary

Since yesterday (9th of March 2025), it appears that the local tests and CI tests are triggering a failed snapshot for the LocaleController. This issue has been affecting the project's test suite, causing 4 out of 149 snapshots to fail.

Steps to Reproduce

Run the unit tests locally OR review the CI for running tests test:unit -- LocaleController

Potential Solution

We should probably avoid snapshot tests generally, as they do not really test anything except content and are not fully reliable. Instead, we can use other testing strategies, such as unit testing or integration testing, to ensure the functionality of the LocaleController.

Additionally, we should try to mock the system time zone for the tests that rely on time zone / server settings within Jest. This can be achieved by using Jest's mocking capabilities to simulate different time zones and server settings.

Logs

The following logs show the failed snapshots:

Summary of all failing tests
FAIL client/src/controllers/LocaleController.test.js
  ● LocaleController › localizing time zone options › should append localized time zone labels to the options

    expect(received).toMatchSnapshot()

    Snapshot name: `LocaleController localizing time zone options should append localized time zone labels to the options 1`

    - Snapshot  - 2
    + Received  + 2

    @@ -29,11 +29,11 @@
        
            
        <option
          value="America/Indiana/Knox"
        >
    -     America/Indiana/Knox: CST (Central Standard Time)
    +     America/Indiana/Knox: CDT (Central Daylight Time)
        </option>
        
            
        <option
          value="Antarctica/Rothera"
    @@ -78,11 +78,11 @@
        
            
        <option
          value="Canada/Atlantic"
        >
    -     Canada/Atlantic: AST (Atlantic Standard Time)
    +     Canada/Atlantic: ADT (Atlantic Daylight Time)
        </option>
        
            
        <option
          value="Chile/Continental"

      66 |         'Use server time zone: GMT (Greenwich Mean Time)',
      67 |       );
    > 68 |       expect(select).toMatchSnapshot();
         |                      ^
      69 |     });
      70 |   });
      71 |

      at Object.<anonymous> (client/src/controllers/LocaleController.test.js:68:22)

  ● LocaleController › should localize to the current HTML locale and use the server time zone param for the default

    expect(received).toMatchSnapshot()

    Snapshot name: `LocaleController should localize to the current HTML locale and use the server time zone param for the default 1`

    - Snapshot  - 2
    + Received  + 2

    @@ -29,11 +29,11 @@
        
            
        <option
          value="America/Indiana/Knox"
        >
    -     America/Indiana/Knox: CST (Waktu Standar Tengah)
    +     America/Indiana/Knox: CDT (Waktu Musim Panas Tengah)
        </option>
        
            
        <option
          value="Antarctica/Rothera"
    @@ -78,11 +78,11 @@
        
            
        <option
          value="Canada/Atlantic"
        >
    -     Canada/Atlantic: AST (Waktu Standar Atlantik)
    +     Canada/Atlantic: ADT (Waktu Musim Panas Atlantik)
        </option>
        
            
        <option
          value="Chile/Continental"

      89 |       'Use server time zone: WIB (Waktu Indonesia Barat)',
      90 |     );
    > 91 |     expect(select).toMatchSnapshot();
         |                    ^
      92 |   });
      93 |
      94 |   it('should skip updating the default option if server time zone is not provided', async () => {

      at Object.<anonymous> (client/src/controllers/LocaleController.test.js:91:20)

  ● LocaleController › should skip updating the default option if server time zone is not provided

    expect(received).toMatchSnapshot()

    Snapshot name: `LocaleController should skip updating the default option if server time zone is not provided 1`

    - Snapshot  - 2
    + Received  + 2

    @@ -28,11 +28,11 @@
        
            
        <option
          value="America/Indiana/Knox"
        >
    -     America/Indiana/Knox: غرينتش-٦ (التوقيت الرسمي المركزي لأمريكا الشمالية)
    +     America/Indiana/Knox: غرينتش-٥ (التوقيت الصيفي المركزي لأمريكا الشمالية)
        </option>
        
            
        <option
          value="Antarctica/Rothera"
    @@ -77,11 +77,11 @@
        
            
        <option
          value="Canada/Atlantic"
        >
    -     Canada/Atlantic: غرينتش-٤ (التوقيت الرسمي الأطلسي)
    +     Canada/Atlantic: غرينتش-٣ (التوقيت الصيفي الأطلسي)
        </option>
        
            
        <option
          value="Chile/Continental"

      108 |     expect(selected.value).toEqual('');
      109 |     expect(selected.textContent).toEqual('Use server time zone');
    > 110 |     expect(select).toMatchSnapshot();
          |                    ^
      111 |   });
      112 |
      113 |   it('should allow updating the time zone options on an uncontrolled select element via events', async () => {

      at Object.<anonymous> (client/src/controllers/LocaleController.test.js:110:20)

  ● LocaleController › should allow updating the time zone options on an uncontrolled select element via events

    expect(received).toMatchSnapshot()

    Snapshot name: `LocaleController should allow updating the time zone options on an uncontrolled select element via events 1`

    - Snapshot  - 2
    + Received  + 2

    @@ -28,11 +28,11 @@
        
            
        <option
          value="America/Indiana/Knox"
        >
    -     America/Indiana/Knox: CST (Waktu Standar Tengah)
    +     America/Indiana/Knox: CDT (Waktu Musim Panas Tengah)
        </option>
        
            
        <option
          value="Antarctica/Rothera"
    @@ -77,11 +77,11 @@
        
            
        <option
          value="Canada/Atlantic"
        >
    -     Canada/Atlantic: AST (Waktu Standar Atlantik)
    +     Canada/Atlantic: ADT (Waktu Musim Panas Atlantik)
        </option>
        
            
        <option
          value="Chile/Continental"

      133 |       'Use server time zone: GMT+9 (Waktu Standar Jepang)',
      134 |     );
    > 135 |     expect(select).toMatchSnapshot();
          |                    ^
      136 |   });
      137 | });
      138 |

      at Object.<anonymous> (client/src/controllers/LocaleController.test.js:135:20)


Snapshot Summary
 › 4 snapshots failed from 1 test suite. Inspect your code changes or run `npm run test:unit:coverage -- -u` to update them.

Test Suites: 1 failed, 112 passed, 113 total
Tests:       4 failed, 1021 passed, 1025 total
Snapshots:   4 failed, 145 passed, 149 total
Time:        73.843 s
Ran all test suites.

Exited with code exit status 1

Working on this

Anyone can contribute to this, but a solid understanding of Jest setup/mocks is required.
View our contributing guidelines, add a comment to the issue once you’re ready to start.

Contributing Guidelines

If you're interested in contributing to this issue, please follow these steps:

Review the contributing guidelines to ensure you understand the project's codebase and testing framework.
Add a comment to this issue indicating your interest in contributing.
Fork the project and create a new branch for your changes.
Implement the changes and test them thoroughly.
Submit a pull request with your changes.

Testing Framework

The project uses Jest as its testing framework. If you're not familiar with Jest, please review the documentation to understand how to write and run tests.

Codebase

The project's codebase is written in JavaScript and uses a modular architecture. If you're not familiar with the codebase, please review the documentation to understand the project's structure and dependencies.

Time Zone Mocking

To mock the system time zone, you can use Jest's jest.mock function to simulate different time zones and server settings. Please review the documentation to understand how to use this function.

Snapshot Testing

Snapshot testing is a type of testing that checks the output of a function or component against a pre-recorded snapshot. If you're not familiar with snapshot testing, please review the documentation to understand how to write and run snapshot tests.

Contributing to the Project

Q: What is a snapshot test?

A: A snapshot test is a type of test that checks the output of a function or component against a pre-recorded snapshot. It's a way to ensure that the output of a function or component remains the same even after changes are made to the code.

Q: Why are snapshot tests failing in CI?

A: Snapshot tests are failing in CI because the output of the LocaleController is changing due to changes in the system time zone or server settings. This is causing the snapshot tests to fail because they are expecting a specific output that no longer matches the actual output.

Q: How can I fix the snapshot test failures?

A: To fix the snapshot test failures, you can try the following:

Mock the system time zone: Use Jest's jest.mock function to simulate different time zones and server settings. This will allow you to test the LocaleController in different scenarios without affecting the actual system time zone.
Update the snapshot: If the output of the LocaleController has changed, you can update the snapshot to reflect the new output. This will ensure that the snapshot test passes even if the output of the LocaleController changes.
Use a different testing strategy: If snapshot testing is not working for you, you can try using a different testing strategy such as unit testing or integration testing.

Q: What is the best way to handle time zone changes in testing?

A: The best way to handle time zone changes in testing is to use Jest's jest.mock function to simulate different time zones and server settings. This will allow you to test the LocaleController in different scenarios without affecting the actual system time zone.

Q: How can I contribute to fixing the snapshot test failures?

A: If you're interested in contributing to fixing the snapshot test failures, please follow these steps:

Review the contributing guidelines: Review the contributing guidelines to ensure you understand the project's codebase and testing framework.
Add a comment to the issue: Add a comment to this issue indicating your interest in contributing.
Fork the project: Fork the project and create a new branch for your changes.
Implement the changes: Implement the changes and test them thoroughly.
Submit a pull request: Submit a pull request with your changes.

Q: What is the best way to learn more about Jest and snapshot testing?

A: The best way to learn more about Jest and snapshot testing is to review the official documentation and tutorials. You can also join the project's community to discuss your questions and get feedback from other contributors.

Additional Resources

Contributing to the Project

If you're interested in contributing to the project, please review the contributing guidelines to understand the project's codebase and testing framework. You can also join the project's community to discuss your ideas and get feedback from other contributors.