Using unit and integration tests in Jest

I was trying to use jest-puppeteer with monorepo project i'm working on in roadmap aiming to add integration tests using puppeteer.

And honestly, I didn't have any idea how to load different jest.config.js for different packages I already have in the monorepo.

---

In case anyone stuck in the same problem as me. The simple solution is to separate the unit test from an integration test. Obvious? didn't seem so for me.

This "separation" should be reflected in the project structure, config files, and running scripts.

Of course, the main problem I faced here, is dealing with the switching environment. I use testEnvironment: "jsdom" and to run puppeteer you have to remove any testing environment and use preset: "jest-puppeteer".

Lesson 1: You can't run all tests at once.
Lesson 2: It doesn't matter if you are using monorepo or not.

So, I ended up with the following structure:

myProj1/
  src/
  test/
    integration/
      myFrist.test.js
    foo.test.js
    bar.test.js
  package.json

myProj2/
  ...
myProj3/
  ...
jest.config.js
jest.integration.config.js
package.json

What's in config files?

Well, not much at all.

In jest.config.js, the main goal is to exclude the integration test.

module.exports = {
  testEnvironment: "jsdom",
  testPathIgnorePatterns: ["test/integration"],
};

Inside jest.integration.config.js, make sure to test only the integration files.

module.exports = {
  preset: "jest-puppeteer",
  testRegex: "/integration/",
};

And finally inside root package.json:

"scripts": {
   "test:unit": "jest",
   "test:e2e": "jest -c jest.integration.config.js",
   "test": "yarn test:unit && yarn test:e2e",
 },

Using jest -c to pass a custom config for Jest. Since I have jest.config.js for the unit test there's no need to pass one, Jest will automatically read it. But that's not the case for test:e2e.

Eventually, the test script will run both integration and unit tests.

GIF

Comments

[Ryan McDonough]

This was incredibly useful @jalal246 and solved what I was looking for. Thanks for the tip!

[Jalal 🚀]

Thanks for the kind words. Appreciate it.

[Jatto Abdulqahhar]

How do you merge coverage report from both application?

[Ryan McDonough]

That's never an easy problem to solve, with any framework or language. It's especially complicated when integration testing a distributed system. The complexity to solve that just doesn't seem to be worth it IMO.

[John Grant]

I don't think you should. Knowing what coverage you have in integration vs unit matters.

[Erik Garces Matos]

I have the same doubt =/

[Robin Mitra]

Thanks! Works great for my use-case of separating unit and integration tests on a React Native project.

[Jalal 🚀]

Glad it helps!

[Gleb Irovich]

Jest allows to specify config file as a parameter. You can add it in npm scripts for each project in your monorepo.

[Jalal 🚀]

Adding separate jest config files is a key here. But still, need to figure out more about it, including opening a server for example, when I have some time to launch end to end test.