Use esbuild in your create-react-app for faster compilation, development and tests

Last update: May 10, 2022

🚀 create-react-app-esbuild 🚀

Use esbuild in your create-react-app for faster compilation, development and tests.

Features

  • Replace babel-loader with esbuild during development
  • Replace babel-loader with esbuild for faster build time
  • Replace terser with esbuild for faster build time
  • Replace OptimizeCssAssetsWebpackPlugin with esbuild for faster build time
  • Use esbuild when running jest

Getting started

Follow the guide to setup your project.

FAQ

Why is it faster?

Internally create-react-app use babel to compile the javascript / typescript files of your application. By using craco-esbuild, you use the esbuild compiler to compile your app instead of babel. esbuild is a super fast javascript / typescript bundler and minifier written in Go.

What is craco and why do I need it?

craco (Create React App Configuration Override) is an easy and comprehensible configuration layer for create-react-app. By using craco you can customise the create-react-app configuration without ejecting.

License

MIT Š LÊo Pradel

GitHub

https://github.com/pradel/create-react-app-esbuild
Comments
  • 1. SVGR import not working

    SVG import is not working (import as a ReactComponent):

    'ReactComponent' is not exported from ''../../../../assets/star.svg' (imported as 'Star').
    

    SVGR is included by default in CRA 4.

    import { ReactComponent as StarSvg } from '../../../../assets/star.svg'
    

    Craco config as simple as:

    // craco.config.js
    const CracoEsbuildPlugin = require("craco-esbuild");
    
    module.exports = {
      plugins: [{ plugin: CracoEsbuildPlugin }],
    };
    
    Reviewed by kevinfaveri at 2021-01-12 23:19
  • 2. `yarn run start` fails with UnhandledPromiseRejectionWarning

    I'm not having much luck with Google or Github on this issue so that leads me to believe it might be specific to this project. Am on [email protected], unejected.

    Using a very basic configuration:

    const CracoEsbuildPlugin = require('craco-esbuild')
    
    module.exports = {
      plugins: [
        {
          plugin: CracoEsbuildPlugin,
        },
      ],
    }
    

    Upon running craco start, I receive the following error:

    (node:78044) UnhandledPromiseRejectionWarning: Error: Cannot find module 'webpack/lib/ModuleFilenameHelpers'
    Require stack:
    - /Users/me/dev/myproject/node_modules/esbuild-loader/dist/minify-plugin.js
    - /Users/me/dev/myproject/node_modules/esbuild-loader/dist/index.js
    - /Users/me/dev/myproject/node_modules/craco-esbuild/src/index.js
    - /Users/me/dev/myproject/packages/frontend/craco.config.js
    - /Users/me/dev/myproject/node_modules/@craco/craco/lib/config.js
    - /Users/me/dev/myproject/node_modules/@craco/craco/scripts/start.js
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
        at Function.Module._load (internal/modules/cjs/loader.js:687:27)
        at Module.require (internal/modules/cjs/loader.js:903:19)
        at require (internal/modules/cjs/helpers.js:74:18)
        at Object.<anonymous> (/Users/me/dev/myproject/node_modules/esbuild-loader/dist/minify-plugin.js:5:33)
        at Module._compile (internal/modules/cjs/loader.js:1015:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
        at Module.load (internal/modules/cjs/loader.js:879:32)
        at Function.Module._load (internal/modules/cjs/loader.js:724:14)
        at Module.require (internal/modules/cjs/loader.js:903:19)
    (node:78044) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
    (node:78044) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.```
    
    Reviewed by bstro at 2021-03-16 00:18
  • 3. Use with ant design/less

    Hi,

    I use the popular Ant Design UI library in my project and for some reason after adding craco-esbuild (which is 2x faster than babel, woohoo!) I'm unable to control the customized theme provider by antd (they use less for that). It seems that the output bundle doesn't include the compiled css rules.

    I'm not even sure why this happens, as this package replaces babel and less files are handled by webpack anyways 🤔

    Would be superb if you have any lead/suggestion on that 🙏

    Reviewed by yaronya at 2021-03-16 00:10
  • 4. feat: create-react-app 5 support

    🚀 create-react-app 5 is now supported 🚀

    Breaking Changes

    • Removed the enableSvgr and svgrOptions options. Svgr is now working out of the box.
    • Drop support for CRA 3 and 4. As many underlying libraries have changed, CRA 4 and 3 are no longer supported. Check the CRA changelog to see what changed.

    Migrating from 0.4.X to 0.5.X

    • You will first need to migrate your project to CRA 5. See the CRA Migration guide for more information.
    • Upgrade craco-esbuild to version 0.5.0 or higher in your project.
    • If you are using enableSvgr or svgrOptions you can remove them from the craco.config.js file. Svgr is now working out of the box.
    Reviewed by pradel at 2021-12-21 11:16
  • 5. jest mocks don't work

    hey, thanks for the great project. looks like we need an esbuild plugin to make jest mocking work. see also https://github.com/kulshekhar/ts-jest/issues/90

    Reviewed by petehunt at 2021-02-01 07:04
  • 6. CSS optimization

    In the es-build documentation there is an option to use the ESBuildMinifyPlugin for CSS minification here.

    This module doesn't seem to take advantage of that.

    Thanks for the convenience of this anyway! :)

    Reviewed by dbuezas at 2021-09-03 11:47
  • 7. Test run fails with "Transform failed with 1 error:..."

    I am getting the following error when running tests.

      ● Test suite failed to run
    
        Transform failed with 1 error:
        <stdin>:986:4: error: Unexpected "return"
    
          at failureErrorWithLog (node_modules/esbuild/lib/main.js:1275:15)
          at sendRequest (node_modules/esbuild/lib/main.js:1094:33)
          at responseCallbacks.set (node_modules/esbuild/lib/main.js:576:9)
          at handleIncomingPacket (node_modules/esbuild/lib/main.js:665:9)
          at readFromStdout (node_modules/esbuild/lib/main.js:543:7)
          at runServiceSync (node_modules/esbuild/lib/main.js:1591:3)
          at Object.transformSync (node_modules/esbuild/lib/main.js:1421:3)
          at Object.process (node_modules/esbuild-jest/esbuild-jest.js:54:36)
          at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:453:35)
          at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:523:40)
    

    The main build works fine and is configured like so:

    module.exports = {
        plugins: [
            {
                plugin: CracoEsbuildPlugin,
                options: {
                    enableSvgr: true,
                    esbuildLoaderOptions: {
                        loader: "tsx",
                        target: "es2017",
                    },
                },
            },
      // ...
    

    I noticed that esbuild-jest has a note about when using "paths" in tsconfig.json. I do not have "paths" set in my tsconfig.json, but am using "baseUrl" to resolve non-relative modules. Could that have anything to do with this error?

    Reviewed by daryl0313 at 2021-04-13 14:08
  • 8. CRA5 and @craco 6.4.3

    How do you guys managed to make it work here https://github.com/pradel/create-react-app-esbuild/pull/48

    i'm trying to upgrade to CRA 5.0 with carco 6.4.3. but it says that there are conflicting dependencies as craco 6.4.3 needs CRA4

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react-scripts npm ERR! [email protected]"5.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^4.0.0" from @craco/[email protected] npm ERR! node_modules/@craco/craco npm ERR! dev @craco/[email protected]"^6.4.3" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

    at the same time if i'm trying to use craco 7.0.0-aplha.3 it complains that carao-esbuild 0.5.0 needs craco ^6.

    any advice of what i'm doing wrong is much appreciated as i'm a bit stuck with it for couple of days.

    Reviewed by gegorov at 2022-02-22 13:13
  • 9. feat: add `svgrOptions` to customize svgr plugin behavior

    I needed to be able to pass svgr options (for me to be able to set the icon option to true) :

    plugins: [
          {
            plugin: CracoEsbuildPlugin,
            options: {
              enableSvgr: true,
              svgrOptions: {
                icon: true,
              },
            },
          },
        ],
    

    Closes #31

    Reviewed by lpillonel at 2021-12-13 07:58
  • 10. Significant size differences

    Firstly thanks for the great plugin!

    I was looking at potentially migrating our codebase to utilise esbuild and noticed that a compiled build was significantly larger than without esbuild. That is to say more than 2.5x larger than the output without esbuild, as below.

    With standard CRA/Webpack:

    File sizes after gzip:
    
      152.72 KB (-259.17 KB)  public_html\static\js\2.726246eb.chunk.js
      16.54 KB (-6.71 KB)     public_html\static\js\main.b3737a8f.chunk.js
      1.44 KB (+14 B)         public_html\static\css\2.60d63202.chunk.css
      776 B (-6 B)            public_html\static\js\runtime-main.f6cb6938.js
      641 B                   public_html\static\css\main.275971f0.chunk.css
    

    With Esbuild:

    File sizes after gzip:
    
      411.88 KB  public_html\static\js\2.ae05d37c.chunk.js
      23.25 KB   public_html\static\js\main.51dab84a.chunk.js
      1.42 KB    public_html\static\css\2.60d63202.chunk.css
      782 B      public_html\static\js\runtime-main.1ccb1639.js
      641 B      public_html\static\css\main.275971f0.chunk.css
    

    In the grand scheme of things, a couple of hundred KB isn't that huge of a deal but I'm wondering if this is perhaps due to misconfiguration or something else that perhaps I missed?

    Below is my craco configuration for reference:

    const isCoverage = process.env.COVERAGE === "true";
    const babelPlugins = isCoverage ? ["babel-plugin-istanbul"] : [];
    
    module.exports = {
        babel: {
            plugins: babelPlugins,
        },
        plugins: [
            {
                plugin: require("craco-alias"),
                options: {
                    source: "tsconfig",
                    baseUrl: "./src",
                    tsConfigPath: "./tsconfig.aliases.json",
                },
            },
            {
                plugin: require("craco-esbuild"),
                options: {
                    enableSvgr: true,
                    esbuildMinimizerOptions: {
                        target: "es6",
                        css: true,
                        minify: true,
                    },
                    skipEsbuildJest: true,
                },
            },
        ],
    };
    

    All other configurations can also be found here.

    Reviewed by nightah at 2021-09-26 12:05
  • 11. Unable to use TypeScript

    I'm using typescript and followed the getting started https://github.com/pradel/create-react-app-esbuild/blob/main/packages/craco-esbuild/README.md

    App.tsx

    const { isLoading } = useQuery<FetchUserQueryResponse, Error>({
        queryKey: 'user', 
        queryFn: fetchUser,
    });
    
    Failed to compile.
    
    ./src/Components/App/App.tsx
    Error: Transform failed with 1 error:
    client/src/Components/App/App.tsx:38:64: error: Expected ";" but found ">"
    

    craco.config.js

    const CracoEsbuildPlugin = require('craco-esbuild');
    const { ProvidePlugin } = require('webpack');
    
    module.exports = {
        webpack: {
            plugins: [
                new ProvidePlugin({
                    React: 'react',
                }),
            ],
        },
        plugins: [
            {
                plugin: CracoEsbuildPlugin,
                options: {
                    enableSvgr: true, // Optional.
                    esbuildLoaderOptions: {
                        loader: 'jsx',
                        target: 'es2015',
                    },
                },
            },
        ],
        style: {
            postcss: {
                plugins: [require('tailwindcss'), require('autoprefixer')],
            },
        },
    };
    
    Reviewed by M0hammedImran at 2021-07-07 06:34
  • 12. Does not install - unable to resolve dependency tree

    It is currently not possible to install craco-esbuild.

    Steps to reproduce:

    1. Using node v 16.6.2

    H:\nvm list

    • 16.6.2 (Currently using 64-bit executable) 16.6.0 13.5.0 12.13.0 10.14.1 8.8.0
    1. Create new project with npm init

    2. Try to install: H:\test_clean>npm install --save-dev craco-esbuild @craco/craco npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react-scripts npm ERR! peer [email protected]"^4.0.0" from @craco/[email protected] npm ERR! node_modules/@craco/craco npm ERR! dev @craco/[email protected]"" from the root project npm ERR! peer @craco/[email protected]"^6.0.0" from [email protected] npm ERR! node_modules/craco-esbuild npm ERR! dev [email protected]"" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^5.0.0" from [email protected] npm ERR! node_modules/craco-esbuild npm ERR! dev [email protected]"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

    Reviewed by rickevry at 2022-04-26 06:05
  • 13. JSX syntax extension is not enabled

    When I run craco test "--watchAll=false", I get the following error in one of my tests:

    <stdin>:69:11: ERROR: The JSX syntax extension is not currently enabled
    

    Here's how my craco.config.js looks like:

    module.exports = {
      plugins: [
        {
          plugin: CracoEsbuildPlugin,
          options: {
            esbuildLoaderOptions: {
              loader: "tsx", // Set the value to 'tsx' if you use typescript
              target: "es2015",
            },
            esbuildMinimizerOptions: {
              target: "es2015",
              css: true, // if true, OptimizeCssAssetsWebpackPlugin will also be replaced by esbuild.
            },
            skipEsbuildJest: false, // Optional. Set to true if you want to use babel for jest tests,
            esbuildJestOptions: {
              loaders: {
                ".ts": "ts",
                ".tsx": "tsx",
              },
            },
          },
        },
      ],
      webpack: {
        configure: (webpackConfig, { env }) => {
          const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
            ({ constructor }) => constructor && constructor.name === "ModuleScopePlugin",
          );
    
          webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
    
          if (env === "development") {
            const fileLoader = {
              test: /\.(png|jpe?g|gif|svg|woff|woff2|webp)$/i,
              use: [
                {
                  loader: "url-loader",
                  options: {
                    limit: 256000,
                  },
                },
              ],
            };
            addBeforeLoader(webpackConfig, loaderByName("url-loader"), fileLoader);
          }
    
          return env === "development" ? webpackConfig : smp.wrap(webpackConfig);
        },
      },
      babel: {
        plugins: [
          [
            "@simbathesailor/babel-plugin-use-what-changed",
            {
              active: process.env.NODE_ENV === "development", // boolean
            },
          ],
        ],
      },
    };
    
    

    If I set skipEsbuildJest to true, then all the tests pass.

    Can you tell me if I'm doing something wrong or if it's a bug in the package?

    Reviewed by ravgeetdhillon at 2022-03-17 13:56
  • 14. Provide information on how `esbuild` and `esbuild-loader` are different

    Running this config with esbuild-loader would not be the same as compiling with esbuild as shown on the readme on the project's GitHub - https://github.com/privatenumber/esbuild-loader#why-am-i-not-getting-a-100x-speed-improvement-as-advertised Adding this would clarify on how the two are different

    Reviewed by burhanuday at 2021-12-27 10:24
  • 15. Support for babel plugins

    Just a feature suggestion. Instead of dropping babel-loader, it can be used together with esbuild-loader:

    // define esbuild-loader
    const esbuildLoader = {
      // These could be used for the patched babel-loader
      // test: /\.(js|mjs|jsx|ts|tsx)$/,
      // include: [paths.appSrc, ...optionalIncludes],
      loader: require.resolve('esbuild-loader'),
      options: esbuildLoaderOptions
        ? esbuildLoaderOptions
        : {
            loader: useTypeScript ? 'tsx' : 'jsx',
            target: 'es2015',
          },
    };
    
    // modify babel loader
    const babelLoaderPrev = getLoader(
      webpackConfig,
      loaderByName('babel-loader')
    ).match.loader;
    
    const { loader, options } = babelLoaderPrev;
    
    const babelLoader = { loader, options };
    
    // Only keep styled-components plugin, drop the rest
    options.presets = [];
    options.plugins = ['babel-plugin-styled-components'];
    
    const babelEsbuildLoader = babelLoaderPrev;
    
    // Switch to .use
    delete babelEsbuildLoader.loader;
    delete babelEsbuildLoader.options;
    
    babelEsbuildLoader.use = [babelLoader, esbuildLoader];
    

    Not sure how the api should look like, just added my own configuration to include styled-components plugin. It seems to work fine after esbuild has done all the heavy work.

    Inspiration: https://news.ycombinator.com/item?id=26977799

    Reviewed by RanzQ at 2021-11-18 08:17
  • 16. variances in typescript checking times

    Hi I've only started playing with craco and this plugin tonight, so I may well be missing something pretty obvious.

    We have a large CRA typescript project which I'm experimenting with. The craco.config.js looks as follows:

    // craco.config.js
    const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
    const CracoEsbuildPlugin = require("craco-esbuild");
    const smp = new SpeedMeasurePlugin();
    const { ProvidePlugin } = require('webpack');
    
    module.exports = {
      webpack: {
        configure: (webpackConfig) => smp.wrap(webpackConfig),
      },
      plugins: [
        {
          plugin: CracoEsbuildPlugin,
        }
      ],
    
    };
    

    If I disable CracoEsbuildPlugin and run

    GENERATE_SOURCEMAP=false INLINE_RUNTIME_CHUNK=false IMAGE_INLINE_SIZE_LIMIT=0 NODE_OPTIONS=--max-old-space-size=4096 craco build
    

    I get the following

     SMP  ⏱  
    General output time took 1 min, 33.73 secs
    
     SMP  ⏱  Plugins
    TerserPlugin took 37.81 secs
    ForkTsCheckerWebpackPlugin took 21.21 secs
    IgnorePlugin took 3.79 secs
    ESLintWebpackPlugin took 2.19 secs
    OptimizeCssAssetsWebpackPlugin took 0.752 secs
    HtmlWebpackPlugin took 0.13 secs
    ManifestPlugin took 0.005 secs
    MiniCssExtractPlugin took 0.002 secs
    InterpolateHtmlPlugin took 0.001 secs
    DefinePlugin took 0.001 secs
    ModuleNotFoundPlugin took 0 secs
    
     SMP  ⏱  Loaders
    babel-loader took 29.52 secs
      module count = 2247
    modules with no loaders took 7.43 secs
      module count = 119
    mini-css-extract-plugin, and 
    css-loader, and 
    postcss-loader took 2.43 secs
      module count = 1
    css-loader, and 
    postcss-loader took 1.39 secs
      module count = 6
    url-loader took 0.097 secs
      module count = 1
    html-webpack-plugin took 0.023 secs
      module count = 1
    

    with CracoEsbuildPlugin enabled I'm seeing

     SMP  ⏱  
    General output time took 1 min, 27.34 secs
    
     SMP  ⏱  Plugins
    ForkTsCheckerWebpackPlugin took 1 min, 4.92 secs
    IgnorePlugin took 2.31 secs
    ESLintWebpackPlugin took 1.89 secs
    HtmlWebpackPlugin took 0.116 secs
    ManifestPlugin took 0.006 secs
    MiniCssExtractPlugin took 0.006 secs
    InterpolateHtmlPlugin took 0.001 secs
    ModuleNotFoundPlugin took 0 secs
    DefinePlugin took 0 secs
    
     SMP  ⏱  Loaders
    modules with no loaders took 15.49 secs
      module count = 1780
    esbuild-loader took 11.15 secs
      module count = 522
    mini-css-extract-plugin, and 
    css-loader, and 
    postcss-loader took 1.8 secs
      module count = 1
    css-loader, and 
    postcss-loader took 1.1 secs
      module count = 6
    url-loader took 0.116 secs
      module count = 1
    html-webpack-plugin took 0.015 secs
      module count = 1
    

    so whilst esbuild is quiker (yay!) ForkTsCheckerWebpackPlugin is approx 3 times longer and modules with no loaders twice as long

    I'm stumped as to why I'm seeing such a difference here - does anyone have any ideas?

    Thanks!

    Reviewed by pollen8 at 2021-09-14 20:48
  • 17. Jest tests aren't working

    Compilation of the project works fine but as soon as try to run tests it fails with an odd syntax error that is not present when the craco-esbuild is disabled in craco.config.js. Perhaps there is a way to add this plugin for build & start leaving tests as is? Any help would be appreciated.

    yarn test
    yarn run v1.22.10
    $ craco test --watchAll=false
     FAIL  src/utils/__test__/utils.spec.ts
      ● Test suite failed to run
    
        Transform failed with 1 error:
        <stdin>:59:4: error: Expected "}" but found ":"
    
          at failureErrorWithLog (node_modules/esbuild/lib/main.js:1443:15)
          at node_modules/esbuild/lib/main.js:1254:29
          at node_modules/esbuild/lib/main.js:606:9
          at handleIncomingPacket (node_modules/esbuild/lib/main.js:703:9)
          at readFromStdout (node_modules/esbuild/lib/main.js:573:7)
          at runServiceSync (node_modules/esbuild/lib/main.js:1808:3)
          at Object.transformSync (node_modules/esbuild/lib/main.js:1650:3)
          at Object.process (node_modules/esbuild-jest/esbuild-jest.js:54:36)
          at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:464:35)
          at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:569:40)
          at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:607:25)
    
    Test Suites: 1 failed, 1 total
    Tests:       0 total
    Snapshots:   0 total
    Time:        1.565 s
    Ran all test suites.
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    

    I am using react-scripts 4.0.3

    Reviewed by grigory-bogush at 2021-07-13 08:18
A WIP on Jest tests working with an Ethereum wallet

Web3 React Jest Tests This is a WIP on Jest tests working with an Ethereum wallet. Support is mainly Metamask at the moment. Requirements Node v16.13.

Apr 23, 2022
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.

Carte Blanche IMPORTANT: This project is unfinished and not maintained. Do not try to use it, it likely does not work anymore. Carte Blanche is an iso

Mar 6, 2022
Create, isolate and test modular UI components in React.
Create, isolate and test modular UI components in React.

ui-harness Isolate, test and document modular UI with React using familiar describe/it testing semantics. http://uiharness.com Quick Start (1-minute)

Dec 24, 2021
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

React Testing Library Simple and complete React DOM testing utilities that encourage good testing practices. Read The Docs | Edit the docs Table of Co

May 15, 2022
🐏 Simple and complete React hooks testing utilities that encourage good testing practices.
🐏 Simple and complete React hooks testing utilities that encourage good testing practices.

react-hooks-testing-library Simple and complete React hooks testing utilities that encourage good testing practices. Read The Docs Table of Contents T

May 14, 2022
Chai.js assertions and convenience functions for testing React Components with enzyme
Chai.js assertions and convenience functions for testing React Components with enzyme

chai-enzyme Chai.js assertions for enzyme. Table of Contents Installation Setup Debug output in assertion exceptions Assertions 1. checked() 1. classN

Apr 24, 2022
⚛ī¸ React testing made easy. Supports DOM and custom renderers.

Rut Rut is a DOM-less React testing library that aims to be lightweight, encourage great testing practices, and reduce flakiness and code smells. It i

Sep 2, 2021
Plugin for http://unexpected.js.org to enable testing the full React virtual DOM, and also the shallow renderer
Plugin for http://unexpected.js.org to enable testing the full React virtual DOM, and also the shallow renderer

unexpected-react Plugin for unexpected to allow for testing the full virtual DOM, and against the shallow renderer (replaces unexpected-react-shallow)

Apr 1, 2022
React.js - Testing playground: States and props, component lifecycle, State Hooks
React.js - Testing playground: States and props, component lifecycle, State Hooks

ReactPlayground React.js - Testing playground: States and props, component lifecycle, State Hooks App.js: Testing states and props. Calling this.setSt

Mar 6, 2022
JavaScript Testing utilities for React

Enzyme Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse,

May 12, 2022
This project implements an online shopping application to show techniques used to test React applications.
This project implements an online shopping application to show techniques used to test React applications.

This project implements an online shopping application to show techniques used to test React applications.

Mar 28, 2022
A simple pink button to test react library

pinkbtn A simple pink button to test react library concept Install npm install --save pinkbtn Usage import React, { Component } from 'react' import M

Oct 29, 2021
React Bricks Test

React Bricks starter with Next.js with Tailwind CSS and React Bricks UI Kick-start your project with this boilerplate for a complete Next.js website b

Nov 7, 2021
Adam-rms-v2 - Rental Management System for Theatre, AV & Broadcast,written in react

AdamRMS is an advanced Rental Management System for Theatre, AV & Broadcast, wri

Jan 8, 2022
Sandbox to test Vite/vitest bundler & React 18.

Vite + React 18 Introduction What is vite ? : is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Apr 4, 2022
Use ESBuild to make your React Native code bundle faster.

metro-minify-esbuild Use ESBuild to make your React Native code bundle faster. Metro Bundler (used for React Native, Instagram, Internal Facebook) all

May 9, 2022
create-esbuild-app is an extremely fast create-react-app replacement.

create-esbuild-app is a wrapper around create-react-app while esbuild-scripts is a react-scripts compatible CLI which can be dropped in as a replacement

Apr 26, 2022
.NET library for JSX compilation and server-side rendering of React components

ReactJS.NET ReactJS.NET is a library that makes it easier to use Babel along with Facebook's React and JSX from C#. Features On-the-fly JSX to JavaScr

May 18, 2022
Berry free react material-ui admin template for easing and faster web development.
Berry free react material-ui admin template for easing and faster web development.

Berry is a creative free react admin template build using the Material-UI. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard Template with easy and intuitive responsive design as on retina screens or laptops.

May 17, 2022
Xdm: A really good MDX compiler. No runtime. With esbuild, Rollup, and webpack plugins

xdm xdm is an MDX compiler that focusses on two things: Compiling the MDX syntax

May 11, 2022