I am trying to test a typescript-react library with jest / @testing-library/react. When I import the lib directly (the compiled js) the tests work but I get a huge warning for each test:

console.error
  Warning: It looks like you're using the wrong act() around your test interactions.
  Be sure to use the matching version of act() corresponding to your renderer:
  
  // for react-dom:
  import {act} from 'react-dom/test-utils';
  // ...
  act(() => ...);
  
  // for react-test-renderer:
  import TestRenderer from react-test-renderer';
  const {act} = TestRenderer;
  // ...
  act(() => ...);

The library has dependencies in node_modules which are not CommonJS which is often a little tricky regarding bundling/transpiling.

So I created a webpack-bundle of the library and all it's dependencies. When I use the webpack-bundle for testing the warnings are gone.

How do I setup babel-jest to reach the same like I did with webpack? Or am I wrong and the error might have another cause?

webpack.config.js:

const path = require('path');
module.exports = {
    mode: 'production',
    optimization: {
        minimize: false
    },
    entry: './lib/index.js',
    output: {
        path: path.resolve(__dirname, 'test'),
        filename: 'webpack-test.js',
        library: {
            name: 'webpackTest',
            type: 'umd',
        },
        globalObject: 'this',
    },
    module: {
        rules: [
            { test: /.ts$/, use: 'ts-loader' },
            {
                test: /.m?js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            }
        ],
    },
    externals: {
        react: 'react',
        reactDOM: 'react-dom'
    }
};

jest.config.js

module.exports = {
  transform: {
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.mjs$": "babel-jest",
    "^.+\\.tsx?$": "ts-jest",
  },
  transformIgnorePatterns: [
    // until solved -> transform all (incl. compl. node_modules)
  ],
  setupFiles: ["jest-canvas-mock"],
  testEnvironment: "jsdom",
};

babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
        modules: "cjs",
      },
    ],
    ["@babel/preset-react", {
      runtime: "automatic"
    }],

    "@babel/preset-typescript",
  ],
};

Any help is highly appreciated.