https://github.com/georgetaveras1231/babel-plugin-jest-enzyme-react-16-patch

Babel plugin to ease migration from enzyme and support incremental adoption of newer react versions
https://github.com/georgetaveras1231/babel-plugin-jest-enzyme-react-16-patch

babel enzyme react react-16 react-17 react-18

Last synced: 26 days ago
JSON representation

Babel plugin to ease migration from enzyme and support incremental adoption of newer react versions

• Host: GitHub
• URL: https://github.com/georgetaveras1231/babel-plugin-jest-enzyme-react-16-patch
• Owner: GeorgeTaveras1231
• License: mit
• Created: 2024-03-31T20:43:30.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-03-31T21:38:22.000Z (7 months ago)
• Last Synced: 2024-09-29T02:40:19.517Z (about 1 month ago)
• Topics: babel, enzyme, react, react-16, react-17, react-18
• Language: JavaScript
• Homepage:
• Size: 1.13 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-jest-enzyme-react-16-patch

A babel plugin that swaps the react version to version 16 when it determines that we are using `enzyme` in the test. This allows you to upgrade react and use it incrementally without waiting on enzyme to introduce support for it, at the date of writing this (September 2021) this support is not yet available. This is especially useful in large repos where you may have hundreds of files referencing `enzyme`.

It does this by introducing mocks for react

```diff

import React from 'react';

import { mount } from 'enzyme';

+import { configure as _configureEnzyme } from 'enzyme';

+import _React16Adpater from 'enzyme-adapter-react-16';

+_configureEnzyme({

+   adapter: new _React16Adapter()

+})

+jest.mock('react', () => require('react-16'));

+jest.mock('react-dom', () => require('react-dom-16'));

+jest.mock('react-dom/test-utils', () => require('react-dom-16/test-utils'));

it('matches snapshot', () => {

  const subject = mount(
Hello
);

  expect(subject.html()).toMatchInlineSnapshot();

});

```


# Install

```

npm install --save-dev babel-plugin-jest-enzyme-react-16-patch

```

# Requirements

For this to work as expected, you must install react 16 as `react-16`. You can do this by using the `npm:` protocol in your package.json

```json

{

  "dependencies": {

    "react": "^18",

    "react-dom": "^18",

    "react-16": "npm:react@^16",

    "react-dom-16": "npm:react-dom@^16"

  }

}

```

# Usage

Add this to list of babel plugins used by jest

In babel config:

```json

{

  "plugins": ["babel-plugin-jest-enzyme-react-16-patch"]

}

```