chore: update emotion to v11 (#6940)

Author: demshy

babel.config.js

@@ -46,7 +46,7 @@ function presets() {
     [
       '@emotion/babel-preset-css-prop',
       {
-        autoLabel: true,
+        autoLabel: 'always',
       },
     ],
     '@babel/typescript',

jest.config.js

@@ -10,7 +10,7 @@ module.exports = {
     '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
   },
   testURL: 'http://localhost:8080',
-  snapshotSerializers: ['jest-emotion'],
+  snapshotSerializers: ['@emotion/jest/serializer'],
   transformIgnorePatterns: [
     'node_modules/(?!copy-text-to-clipboard|clean-stack|escape-string-regexp)',
   ],

package.json

@@ -88,6 +88,7 @@
     "@commitlint/cli": "^16.0.0",
     "@commitlint/config-conventional": "^16.0.0",
     "@emotion/eslint-plugin": "^11.0.0",
+    "@emotion/jest": "^11.11.0",
     "@octokit/rest": "^16.28.7",
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
     "@storybook/addon-actions": "^5.3.6",
@@ -141,7 +142,6 @@
     "husky": "^7.0.0",
     "jest": "^27.0.0",
     "jest-cli": "^27.0.0",
-    "jest-emotion": "^10.0.32",
     "js-yaml": "^4.0.0",
     "mockserver-client": "^5.8.0",
     "mockserver-node": "^5.8.0",
@@ -184,10 +184,10 @@
   },
   "private": true,
   "dependencies": {
-    "@emotion/babel-preset-css-prop": "^10.0.27",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
     "browserify": "^17.0.0",
     "buffer": "^6.0.3",
-    "emotion": "^10.0.9",
+    "emotion": "^11.0.0",
     "eslint-config-prettier": "^8.0.0",
     "eslint-plugin-babel": "^5.3.0",
     "globby": "^12.0.0",

packages/decap-cms-app/package.json

@@ -26,8 +26,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "codemirror": "^5.46.0",
     "decap-cms-backend-azure": "^3.0.1",
     "decap-cms-backend-bitbucket": "^3.0.1",

packages/decap-cms-backend-azure/package.json

@@ -24,8 +24,8 @@
     "semaphore": "^1.1.0"
   },
   "peerDependencies": {
-    "@emotion/core": "^10.0.9",
-    "@emotion/styled": "^10.0.9",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "decap-cms-lib-auth": "^3.0.0",
     "decap-cms-lib-util": "^3.0.0",
     "decap-cms-ui-default": "^3.0.0",

packages/decap-cms-backend-bitbucket/package.json

@@ -25,8 +25,8 @@
     "what-the-diff": "^0.6.0"
   },
   "peerDependencies": {
-    "@emotion/core": "^10.0.35",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "decap-cms-lib-auth": "^3.0.0",
     "decap-cms-lib-util": "^3.0.0",
     "decap-cms-ui-default": "^3.0.0",

packages/decap-cms-backend-git-gateway/package.json

@@ -26,8 +26,8 @@
     "minimatch": "^3.0.4"
   },
   "peerDependencies": {
-    "@emotion/core": "^10.0.35",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "decap-cms-backend-bitbucket": "^3.0.0",
     "decap-cms-backend-github": "^3.0.0",
     "decap-cms-backend-gitlab": "^3.0.0",

packages/decap-cms-backend-git-gateway/src/__tests__/AuthenticationPage.spec.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
+import GitGatewayAuthenticationPage from '../AuthenticationPage';
+
 window.netlifyIdentity = {
   currentUser: jest.fn(),
   on: jest.fn(),
@@ -21,21 +23,32 @@ describe('GitGatewayAuthenticationPage', () => {
   });
 
   it('should render with identity error', () => {
-    const { default: GitGatewayAuthenticationPage } = require('../AuthenticationPage');
-    const { asFragment } = render(<GitGatewayAuthenticationPage {...props} />);
+    // obtain mock calls
+    require('../AuthenticationPage');
+
+    function TestComponent() {
+      const { asFragment } = render(<GitGatewayAuthenticationPage {...props} />);
 
-    const errorCallback = window.netlifyIdentity.on.mock.calls.find(call => call[0] === 'error')[1];
+      const errorCallback = window.netlifyIdentity.on.mock.calls.find(
+        call => call[0] === 'error',
+      )[1];
 
-    errorCallback(
-      new Error('Failed to load settings from https://site.netlify.com/.netlify/identity'),
-    );
+      errorCallback(
+        new Error('Failed to load settings from https://site.netlify.com/.netlify/identity'),
+      );
 
-    expect(asFragment()).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
+    }
+
+    TestComponent();
   });
 
-  it('should render with no identity error', () => {
-    const { default: GitGatewayAuthenticationPage } = require('../AuthenticationPage');
-    const { asFragment } = render(<GitGatewayAuthenticationPage {...props} />);
-    expect(asFragment()).toMatchSnapshot();
+  test('should render with no identity error', () => {
+    function TestComponent() {
+      const { asFragment } = render(<GitGatewayAuthenticationPage {...props} />);
+      expect(asFragment()).toMatchSnapshot();
+    }
+
+    TestComponent();
   });
 });