Babel Preset React

Posted on  by admin

This preset is recommended if you use TypeScript, a typed superset of JavaScript.

Installation

Options

It includes the following plugins:. You will need to specify --extensions ".ts" for @babel/cli & @babel/node cli's to handle .ts files. boolean, defaults to false.

Forcibly enables jsx parsing.

  • Otherwise angle brackets will be treated as typescript's legacy type assertion var foo = bar;.
  • Also, isTSX: true requires allExtensions: true.

Usage

string, defaults to React. Replace the function used when compiling JSX expressions. This is so that we know that the import is not a type import, and should not be removed. string, defaults to React.Fragment. Replace the function used when compiling JSX fragment expressions.

This is so that we know that the import is not a type import, and should not be removed.

  • boolean, defaults to false.
  • Indicates that every file should be parsed as TS, TSX, or as TS without JSX ambiguities (depending on the isTSX and disallowAmbiguousJSXLike options).

boolean, uses the default set by @babel/plugin-transform-typescript. Added in: v7.6.0. Enables compilation of TypeScript namespaces. boolean, defaults to false. Added in: v7.7.0. NOTE: This will be enabled by default in Babel 8.

When enabled, type-only class fields are only removed if they are prefixed with the declare modifier:.

Example

boolean, defaults to true for .mts and .cts files and to false otherwise.

Added in: v7.16.0. Even when JSX parsing is not enabled, this option disallows using syntax that would be ambiguous with JSX ( y type assertions and () => {} type arguments).

It matches the tsc behavior when parsing .mts and .mjs files. boolean, defaults to false. Added in: v7.9.0. When set to true, the transform will only remove type-only imports (introduced in TypeScript 3.8).

This should only be used if you are using TypeScript >= 3.8. boolean, defaults to false. Added in: v7.15.0.

When set to true, Babel will inline enum values rather than using the usual enum output:. This option differs from TypeScript's --isolatedModules behavior, which ignores the const modifier and compiles them as normal enums, and aligns Babel's behavior with TypeScript's default behavior.

However, when exporting a const enum Babel will compile it to a plain object literal so that it doesn't need to rely on cross-file analysis when compiling it:.

Via CLI

You can read more about configuring preset options here.

Then you will see warnings in the console:

React 16 triggers these warnings due to how it checks element types, and the mocked module fails these checks. Your options are:

  1. Render as text. This way you won't see the props passed to the mock component in the snapshot, but it's straightforward:
  2. Render as a custom element. DOM "custom elements" aren't checked for anything and shouldn't fire warnings. They are lowercase and have a dash in the name.
  3. Use react-test-renderer. The test renderer doesn't care about element types and will happily accept e.g. SomeComponent. You could check snapshots using the test renderer, and check component behavior separately using Enzyme.
  4. Disable warnings all together (should be done in your jest setup file):This shouldn't normally be your option of choice as useful warnings could be lost. However, in some cases, for example when testing react-native's components we are rendering react-native tags into the DOM and many warnings are irrelevant. Another option is to swizzle the console.warn and suppress specific warnings.

Via Node API

If you'd like to assert, and manipulate your rendered components you can use react-testing-library, Enzyme, or React's TestUtils. The following two examples use react-testing-library and Enzyme.

With a configuration file (Recommended)

  • npm
  • Yarn

Let's implement a checkbox which swaps between two labels:

The code for this example is available at examples/react-testing-library.

Enzyme​

  • npm
  • Yarn

If you are using a React version below 15.5.0, you will also need to install react-addons-test-utils.

Let's rewrite the test from above using Enzyme instead of react-testing-library. We use Enzyme's shallow renderer in this example.

The code for this example is available at examples/enzyme.

Custom transformers​

If you need more advanced functionality, you can also build your own transformer. Instead of using babel-jest, here is an example of using @babel/core:

Don't forget to install the @babel/core and babel-preset-jest packages for this example to work.

To make this work with Jest you need to update your Jest configuration with this: "transform": {"\\.js$": "path/to/custom-transformer.js"}.

If you'd like to build a transformer with babel support, you can also use babel-jest to compose one and pass in your custom configuration options:

See dedicated docs for more details.