Skip to main content

First class support for Create React App

· 3 min read
Hung Viet Nguyen

CRA is well known for bootstrapping a React App. It hides the complexity of bundling and configuration over react-scripts. However, in some scenarios, it's very hard to customize CRA for a specific purpose. Make Jest Preview works seamlessly with CRA is an example. Currently, there is no way to customize CRA's jest.config.js file easily. So, Jest Preview bundles a few CLIs to make integrating Jest Preview to CRA effortless. We hope with this built-in helper CLI, CRA users can adopt Jest Preview easier.

Option 1 (Recommended): Use built-in codemod CLI:

  • You just need to run the following command at the root of your CRA project:
npx jest-preview config-cra


./node_modules/.bin/jest-preview config-cra

Option 2: Configure manually

  1. Create jest.config.js with the following content:
Click to expand!
/** @type {import('@jest/types').Config.InitialOptions} */

module.exports = {
roots: ['<rootDir>/src'],
collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
setupFiles: ['react-app-polyfill/jsdom'],
setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
testMatch: [
testEnvironment: 'jsdom',
transform: {
'^.+\\.(css|scss|sass|less)$': 'jest-preview/transforms/css',
transformIgnorePatterns: [
modulePaths: [],
moduleNameMapper: {
'^react-native$': 'react-native-web',
moduleFileExtensions: [
watchPlugins: [
resetMocks: true,
  1. Create test script at scripts/test.js
Click to expand!
'use strict';

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', (err) => {
throw err;

// Ensure environment variables are read.

const jest = require('jest');
const execSync = require('child_process').execSync;
let argv = process.argv.slice(2);

function isInGitRepository() {
try {
execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
return true;
} catch (e) {
return false;

function isInMercurialRepository() {
try {
execSync('hg --cwd . root', { stdio: 'ignore' });
return true;
} catch (e) {
return false;

// Watch unless on CI or explicitly running all tests
if (
!process.env.CI &&
argv.indexOf('--watchAll') === -1 &&
argv.indexOf('--watchAll=false') === -1
) {
const hasSourceControl = isInGitRepository() || isInMercurialRepository();
argv.push(hasSourceControl ? '--watch' : '--watchAll');
  1. Update test script in package.json
"scripts": {
- "test": "react-scripts test"
+ "test": "node scripts/test.js"

After this, you've successfully configured step 3 and step 4 of Installation. Please follow Installation and Usage for more.

You can see the full example at Create React App Example.