natterstefan/jest-preset-ns

An opinionated Jest preset for both react and non-react projects.

jest-preset-ns

An opinionated Jest preset for both react and non-react projects.

It comes with two default presets with both babel and typescript support.

Features

• default preset and preset for react are available
• modern javascript (babel) and typescript (ts-jest) support
• mocks files (eg. png, gif, jpg, ...) and date (jest-date-mock) automatically
• looks for tests in __tests__ and for *.(spec|test).[jt]s(x)? files
• easy extendable

Installation

npm install --save-dev jest-preset-ns jest
# or
yarn add jest-preset-ns jest --dev

Usage

Add jest-preset-ns as preset to your Jest config. This can be done by adding it to your package.json or jest.config.js:

// package.json
{
  "jest": {
    "preset": "jest-preset-ns"
  }
}

// jest.config.js
module.exports = {
  preset: 'jest-preset-ns',
  // or: preset: 'jest-preset-ns/presets/default'
  // [...]
}

Feel free to extend the "jest"-configuration object along the way with your own settings.

For running tests, use the Jest CLI.

Compatibility

This package is compatible only with React 16+.

Helpful tips

• extend and adjust ts configuration
• prevent logging all the JSDOM internal errors

How to Publish

# create the tags and the version
yarn lerna:version

# create the changelog entry
npx lerna-changelog --from <tag> --to <tag>
git add CHANGELOG.md && git commit -m "chore: updated CHANGELOG"

# push the tags and the changelog update
git push --follow-tags

# publish to npm
yarn lerna:publish

References

• jest getting-started
• ts-jest preset (ts-jest presets source, ts-jest config source)
• jest defaults
• hops jest-preset
• amex-jest-preset
• amex-jest-preset-react

jest-preset-ns's Issues

Issue: Finalize and test TypeScript support

Bug Report

Relevant information

It was not possible to use the react preset in a NextJS TypeScript project (https://github.com/natterstefan/nextjs-tailwind-template) directly. The current setup with ts-loader did not work. This is most likely because of the current module and target in the tsconfig.json in the NextJS project. There is no way to customize this now. Adding tsconfig in globals.["ts-jest"] did not work.

In the end, creating a babel.config.js (according to https://dev.to/ericdouglas/how-to-configure-jest-on-a-next-js-project-2ic6) and using only jest-preset-ns/presets/react/jest-setup.js helped.

Steps to reproduce

1. add the preset again https://github.com/natterstefan/nextjs-tailwind-template/blob/63ad8fd335c0dfda1b8be24c12a2c630b88feee2/jest.config.js#L2
2. run yarn test

It also did not work with the ts-jest preset, but that's maybe a different problem. Maybe adding the preset directly works?

Observed Results

Jest was not able to transpile the files and work with them.

Expected Results

Jest can run the tests

feat: remove Enzyme

Feature Request

Remove enzyme as it does not support react@18, see https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl.

Add Testing-Library preset/option

Feature Request

A user of the preset should either be able to use both enzyme and (why?) @testing-library/react or select one of them.

Basic example

• https://testing-library.com/docs/react-testing-library/migrate-from-enzyme

Motivation

In the future, I am about to use @testing-library/react more often, which makes me want to improve my personal preset as well.

chore: add TypeScript support to jest.config.js

Feature Request

Add TypeScript support in the jest.config.js file (see https://jestjs.io/docs/configuration).

Basic example

/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {}

Motivation

Add TypeScript support :)

feat: update dependencies and rules

Feature Request

Keep rules up to date.

Basic example

 /**
* Deactive support for removed rules which are still part of one of our
* presets.
*/
'jest/prefer-to-be-null': 0,
'jest/prefer-to-be-undefined': 0,

feat: update jest 28->28

Feature Request

see https://jestjs.io/docs/upgrading-to-jest29

Add support for React@17

Feature Request

Add support for React@17

Basic example

• see enzymejs/enzyme#2429 (comment)
• enzymejs/enzyme#2430

Code

• jest-preset-ns/packages/jest-preset-ns/presets/react/jest-setup.js

  Lines 1 to 5 in 6cc24d9

  	const { configure, mount, render, shallow } = require('enzyme')
  	const Adapter = require('enzyme-adapter-react-16')
  	// Setup Enzyme Adapter
  	configure({ adapter: new Adapter() })

Add .gql and .graphql support

Feature Request

Add support for .gql and .graphql files -> https://www.npmjs.com/package/jest-transform-graphql.

Basic example

 "jest": {
    "transform": {
      "\\.(gql|graphql)$": "jest-transform-graphql",
      ".*": "babel-jest"
    }

Motivation

Add more use-cases for this applying this preset.

References

• https://github.com/xing/hops/blob/1c6213b5be5517c938b870202dee170e942b9d67/packages/jest-preset/jest-preset.js#L52 & https://github.com/xing/hops/blob/1c6213b5be5517c938b870202dee170e942b9d67/packages/jest-preset/transforms/graphql.js

feat: replace ts-jest with babel-jest or @swc/jest

Feature Request

This would increase speed and Jest would not be testing types which is not what Jest is used for in the first place. Or export presets using either of them and let the user choose.

Links

• Related to #4
• https://www.npmjs.com/package/babel-jest
• https://swc.rs/docs/usage/jest
• or use new presets promising better performance and speed: https://kulshekhar.github.io/ts-jest/docs/getting-started/presets