kyt-starter-universal - npm Package Compare versions

Comparing version 1.1.15 to 1.2.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.2.0](http://github.com/nytimes/kyt/packages/kyt-starter-universal/compare/kyt-starter-universal@1.1.15...kyt-starter-universal@1.2.0) (2021-07-08)
+
+
+### Features
+
+* switch to React Testing Library for component testing ([#850](http://github.com/nytimes/kyt/packages/kyt-starter-universal/issues/850)) ([ec89180](http://github.com/nytimes/kyt/packages/kyt-starter-universal/commit/ec89180a179bfbd15b5afcd7b55233435286d798))
+
+
+
+
+
 ## [1.1.15](http://github.com/nytimes/kyt/packages/kyt-starter-universal/compare/kyt-starter-universal@1.1.14...kyt-starter-universal@1.1.15) (2021-07-01)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "kyt-starter-universal",
-  "version": "1.1.15",
+  "version": "1.2.0",
   "description": "",
@@ -15,3 +15,3 @@ "repository": {
   "homepage": "https://github.com/nytimes/kyt/packages/kyt-starter-universal#readme",
-  "gitHead": "99dfa3f8ab5b8c9f4dbe09a89f349b9a9591da10"
+  "gitHead": "54decb826e3bb9ca4c5744772c30a33484e4de40"
 }

README.md

@@ -22,3 +22,3 @@ # Universal React `starter-kyt`
 - [Pretty Lights](https://github.com/nytimes/pretty-lights) - CSS-in-JS with a reliable API
-- [Enzyme](https://airbnb.io/enzyme/) - React component testing
+- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) - React component testing
 
@@ -25,0 +25,0 @@ ## How To Contribute

starter-src/CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.2.0](http://github.com/nytimes/kyt/packages/kyt-starter-universal/compare/kyt-starter-universal-src@1.1.24...kyt-starter-universal-src@1.2.0) (2021-07-08)
+
+
+### Features
+
+* switch to React Testing Library for component testing ([#850](http://github.com/nytimes/kyt/packages/kyt-starter-universal/issues/850)) ([ec89180](http://github.com/nytimes/kyt/packages/kyt-starter-universal/commit/ec89180a179bfbd15b5afcd7b55233435286d798))
+
+
+
+
+
 ## [1.1.24](http://github.com/nytimes/kyt/packages/kyt-starter-universal/compare/kyt-starter-universal-src@1.1.23...kyt-starter-universal-src@1.1.24) (2021-07-01)
@@ -8,0 +19,0 @@

starter-src/package.json

@@ -35,4 +35,4 @@ {
     "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-router-dom": "5.2.0",
@@ -46,7 +46,7 @@ "regenerator-runtime": "0.13.7",
     "@babel/eslint-plugin": "7.14.5",
+    "@testing-library/react": "12.0.0",
     "babel-preset-kyt-react": "1.3.14",
-    "enzyme": "3.11.0",
-    "eslint": "7.29.0",
+    "eslint": "7.30.0",
     "eslint-config-airbnb": "18.2.1",
-    "eslint-config-kyt": "1.5.11",
+    "eslint-config-kyt": "1.6.0",
     "eslint-config-prettier": "8.3.0",
@@ -62,8 +62,8 @@ "eslint-plugin-import": "2.23.4",
     "jest": "27.0.6",
-    "jest-preset-kyt-enzyme": "1.7.2",
+    "jest-preset-kyt-rtl": "1.1.0",
     "jest-preset-kyt-styled": "1.4.11",
-    "kyt": "1.1.16",
+    "kyt": "1.2.0",
     "prettier": "2.3.2"
   },
-  "version": "1.1.24",
+  "version": "1.2.0",
   "kyt": {
@@ -70,0 +70,0 @@ "files": [

starter-src/src/components/App/index.test.js

 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { StaticRouter } from 'react-router-dom';
@@ -7,36 +7,32 @@ import { DynamicImports } from 'kyt-runtime/server';
 
-it('Test example', () => {
-  const wrapper = shallow(<App>test</App>);
+describe('App', () => {
+  it('Test home route', async () => {
+    await Home.preload();
+    const modules = [];
+    const { container } = render(
+      <DynamicImports report={module => modules.push(module)}>
+        <StaticRouter location="/" context={{}}>
+          <App />
+        </StaticRouter>
+      </DynamicImports>
+    );
 
-  expect(wrapper.is('div')).toBeTruthy();
-});
+    expect(container.firstChild).toMatchSnapshot();
+    expect(modules).toMatchSnapshot();
+  });
 
-it('Test home route', async () => {
-  await Home.preload();
-  const modules = [];
-  const wrapper = mount(
-    <DynamicImports report={module => modules.push(module)}>
-      <StaticRouter location="/" context={{}}>
-        <App />
-      </StaticRouter>
-    </DynamicImports>
-  );
+  it('Test tools route', async () => {
+    await Tools.preload();
+    const modules = [];
+    const { container } = render(
+      <DynamicImports report={module => modules.push(module)}>
+        <StaticRouter location="/tools" context={{}}>
+          <App />
+        </StaticRouter>
+      </DynamicImports>
+    );
 
-  expect(wrapper).toMatchSnapshot();
-  expect(modules).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
+    expect(modules).toMatchSnapshot();
+  });
 });
-
-it('Test tools route', async () => {
-  await Tools.preload();
-  const modules = [];
-  const wrapper = mount(
-    <DynamicImports report={module => modules.push(module)}>
-      <StaticRouter location="/tools" context={{}}>
-        <App />
-      </StaticRouter>
-    </DynamicImports>
-  );
-
-  expect(wrapper).toMatchSnapshot();
-  expect(modules).toMatchSnapshot();
-});

starter-src/src/components/Home/index.test.js

 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import Home from '.';
 
 it('Test example', () => {
-  const wrapper = shallow(<Home />);
+  const { container } = render(<Home />);
 
-  expect(wrapper.is('section')).toBeTruthy();
+  expect(container.firstChild.tagName.toLowerCase()).toBe('section');
 });

starter-src/src/components/Tools/index.js

@@ -22,3 +22,6 @@ import React from 'react';
       <li className={styles.toolClass}>
-        <a href="https://airbnb.io/enzyme/">Enzyme</a> - React component testing
+        <a href="https://testing-library.com/docs/react-testing-library/intro/">
+          React Testing Library
+        </a>{' '}
+        - React component testing
       </li>
@@ -25,0 +28,0 @@ </ul>

starter-src/src/components/Tools/index.test.js

 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import Tools from '.';
 
 it('Test example', () => {
-  const wrapper = shallow(<Tools />);
+  const { container } = render(<Tools />);
 
-  expect(wrapper.is('ul')).toBeTruthy();
+  expect(container.firstChild.tagName.toLowerCase()).toBe('ul');
 });

starter-src/test/jest.test.config.js

 const path = require('path');
-const jestPreset = require('jest-preset-kyt-enzyme');
 
@@ -9,5 +8,5 @@ module.exports = {
   },
-  preset: 'jest-preset-kyt-enzyme',
-  snapshotSerializers: [...jestPreset.snapshotSerializers, 'pretty-lights/jest'],
+  preset: 'jest-preset-kyt-rtl',
+  snapshotSerializers: ['pretty-lights/jest'],
   rootDir: path.resolve(__dirname, '..'),
 };

No alert changes

Worsened metrics

Total package byte prevSize

63635

decreased by-14.04%

No dependency changes