Cannot use Jest / TS / React without duplicating and renaming required config

[Josh68]

Hello.

This question is in reference to documentation here: https://www.snowpack.dev/guides/jest

I used the app-template-react-typescript to set up a simple starter project, and wanted to be able to run some tests with Jest and testing-library. I got everything set up as I thought I should, and could not get my tests to handle TS and JSX.

I had installed @snowpack/app-scripts-react and was simply copying and pasting the example starter config to my project root.

After a lot of fumbling around and looking at the core configs, I thought maybe I should try renaming the required, root-level config file from jest.setup.js to jest.config.js. I kept both for a moment, found my setup was suddenly working, then deleted the jest.setup.js and found I'd broken things again. So now I find my Jest setup works as expected only when I have the same (default) configuration file in my project root, once named jest.setup.js and once named jest.config.js.

I am submitting this as a troubleshooting issue after closing a PR, #2951, since simply renaming this config isn't the solution, and I'm not sure what's going on.

Thanks for any feedback.

[Minivera]

If you look at this line here, you can see that the jest.config.js setup from @snowpack/app-scripts-react uses jest.setup.js to configure the setupFilesAfterEnv configuration on jest, https://jestjs.io/docs/configuration#setupfilesafterenv-array. If you use that file, then it should contain something like a beforeEach, not a jest config.

You can disable that and safely remove the jest.setup.js file by overriding that property like this:

// jest.config.js
module.exports = {
  ...require('@snowpack/app-scripts-preact/jest.config.js')(),
  setupFilesAfterEnv: [],
};

From my testing, I don't think app-scrips-preact is even needed, as this config also works without issues after installing ts-jest:

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
};

As far as I can see, the preset from the guide you linked adds some transformers for things like CSS imports, but those could likely be handled manually with a module name mapper. Hope this helps.

[Josh68]

Thanks, @Minivera. I did try out your suggestion with a root-level jest.config.js (removing the additional jest.setup.js), and that seems to work. I do also have ts-jest installed, but haven't tried your second example yet (and any manual additions, as you mention). I guess, though, that I was thinking something should be updated in the docs for app-scripts-preact (and app-scripts-react, which seems to have the same issue). What would you suggest? I had started with a PR on the docs, but realized I didn't understand what they really should recommend, only that the instructions as written weren't working properly.

[Minivera]

I was thinking of updating the docs as well with a new jest guide. Depending on the direction the snowpack team wants to go forward with, we could either update the current guide to mention what the jest.setup.js is used for, update the app scripts to remove it, or write a completely new guide on how to set-up jest from scratch (With subsections on assets processing like CSS) 🤔 .

[Josh68]

I don't think I'm in the position to rewrite. My suggestion to your points would be to document both approaches - the simplest setup as well as a setup from scratch.

[jberes-cmm]

@Minivera I would absolutely LOVE to see that 'from-scratch' jest set-up... I have had just so much trouble as a newer dev. *Edit to mention that your suggestion of overriding the setupFilesAfterEnv var worked like a charm. Thank you (and @Josh68 for raising the discussion)