{"id":4040,"date":"2022-01-24T13:23:50","date_gmt":"2022-01-24T13:23:50","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=4040"},"modified":"2023-01-21T00:31:08","modified_gmt":"2023-01-21T05:31:08","slug":"stencil-jest-27-upgrade-instructions","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/stencil-jest-27-upgrade-instructions","title":{"rendered":"Stencil: Jest 27 Upgrade Instructions"},"content":{"rendered":"

Stencil v2.13.0 includes support for Jest v27, but does not require<\/em> any project to upgrade their version of Jest at this time. You can upgrade Stencil and continue to use any previous version of Jest that you currently have in your workflow with no breaking changes.<\/p>\n

<\/p>\n

For folks who wish to upgrade to both Stencil v2.13.0 and Jest v27, we suggest performing the upgrade as two steps: one where Stencil is upgraded and tested, and another where Jest is upgraded and tested using Stencil v2.13.0. This should help with the debugging process should the upgrade be anything less than perfect.<\/p>\n

Step 1 – Upgrade Stencil<\/h2>\n

First, let’s upgrade Stencil. Open a terminal window in your project’s root directory, and update Stencil to v2.13.0:<\/p>\n

npm<\/h4>\n
npm install @stencil\/core@2.13\n<\/code><\/pre>\n
yarn<\/h4>\n
yarn add @stencil\/core@2.13\n<\/code><\/pre>\n
Run your project’s build process, all tests, and anything else that will help verify your project works. If it does, we recommend you commit your changes using your version control system before moving on to the next step.<\/p>\n
If something\u2019s not working as expected at this point, please open an issue in the Stencil GitHub tracker<\/a>. Please be sure to include:
\n– a minimal reproduction repo (if possible)
\n– the command used to upgrade Stencil
\n– the version of Stencil you’re upgrading from
\n– any additional info you feel might help the team diagnose the issue<\/p>\n
Step 2 – Upgrade Jest<\/h2>\n
Next, upgrade Jest. The command below assumes your project uses Jest v26. If you’re using an older version of Jest, it’s recommended that you run this step for every major version of Jest between your current version and v27.<\/p>\n
npm<\/h4>\n
npm install --save-dev jest@27 jest-cli@27 @types\/jest@27\n<\/code><\/pre>\n
yarn<\/h4>\n
yarn add --save-dev jest@27 jest-cli@27 @types\/jest@27\n<\/code><\/pre>\n
Run the build process, all tests, and anything else that will help verify your project works. If it does, congratulations!  Commit your changes, you’ve successfully upgraded Stencil and Jest!<\/p>\n
Debugging the Jest Upgrade<\/h3>\n
If something’s not working as you’d expect, it is possible that the issue is not necessarily with Stencil and Jest, but a breaking change that was introduced in Jest v27.  Please take a look at the blog post from the Jest team announcing Jest v27<\/a>. It includes a list of all breaking changes that were made between v26 and v27 and may help narrow down the issue.<\/p>\n
In addition to the Jest v27 blog post, please note the Stencil team performed a few additional changes to ensure backwards compatibility between older versions of Jest and Stencil:<\/p>\n