ts-jest VS jest

use ts-jest and set up Paths Re-Map

ts-jest has had some strange performance issues and workarounds in the past, though I haven’t used it very recently so it might have fixed those by now.

Since we're working with TypeScript, we can use ts-jest, which conveniently brings Jest along for the ride:

I want to save you from manually copying the snippets one by one, so here is a Gist with the complete test file. This can be easily executed with Jest (or ts-jest for TypeScript).

See the Jest configuration docs to learn more about Jest configuration. ts-jest also has good documentation.

Using @swc/jest to compile code to CommonJS is much faster than babel-jest, ts-jest which have long cold starts when executing tests in a large project.

ts-jest: A transformer for handling TypeScript files.

Thankfully using TypeScript and TypeScript project references makes the intricate problem of using Jest easier since we can make use of the excellent ts-jest Jest transformer. All we need to do it point ts-jest to the respective tsconfig.json file for each package (see example jest.config.js). Since we have configured TypeScript to be composite and incremental, we do not need to recompile TypeScript for dependencies of a package we want to test, which significantly reduces the runtime for unit tests. ts-jest will also ensure that any error message will reference the line numbers in the source TypeScript files.

We need to configure Jest to transform our files. We must explicitly set our test environment to jsdom, which we are using through Jest. Since v27 Jest's default test environment is node. I will put the configuration in a specific Jest configuration file called jest.config.json in the project root folder. If you create a configuration file called jest.config.js, Vite will complain as it expects only ESM JavaScript by default. Vite will recommend that you rename it to a ".cjs" file if you want to do it that way. You can look at the different ways to configure Jest if you are unsure about the file conventions. If you're using TypeScript, you need to configure svelte-preprocess and ts-jest also, see the svelte-jester docs for how to do that.

GitHub | Website

Jest

Jest, created and maintained by Facebook, is a JavaScript testing framework with a focus on simplicity. It is often recognized for its zero-configuration setup and seamless integration, especially with React applications, making it a favored choice for developers in both small-scale projects and large enterprise applications.

console.error Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node\_modules" folder is ignored by transformers. Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it. • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript • To have some of your "node\_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/configuration For information about custom transformations, see: https://jestjs.io/docs/code-transformation

Note: I will be using Jest as testing framework throughout the examples.

We use Jest Framework for testing. Jest is not a dogma, and, of course, in its place can be any other test runner, such as Mocha or Ava. Let's focus on tests. I'll provide a short example because I don’t want to waste your time. You can find the full version here. It's crucial to read the comments in the code below. Let's go!

Jest has long been my favorite got to test runner when it comes to UI unit and integration testing. With tools like React Testing Library (Testing Library framework for React) you get the benefit of very easy to write and maintain tests, as well as a quick and efficient way to run our tests.

Jest is a well-regarded JavaScript testing framework primarily designed for React applications, although its utility extends to projects using Babel, JavaScript, Node, Angular, and Vue. Created by Facebook, Jest emphasizes ensuring the correctness of JavaScript codebases. It allows developers to write tests with a familiar, feature-rich API, making the testing process swift and enjoyable​​.

SimenB. "Support ESM versions of all pluggable modules" Mar 7, 2021

Are you looking to migrate from Jest to Vitest for your React application? Look no further.