enzyme-adapter-react-18

Author: learning-zone

package-lock.json

@@ -66,8 +66,8 @@
  "url": "https://github.com/learning-zone/react-unit-test.git"
  },
  "devDependencies": {
+ "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
  "enzyme": "^3.11.0",
- "enzyme-adapter-react-17-updated": "^1.0.2",
  "enzyme-to-json": "^3.6.2",
  "jest-canvas-mock": "^2.4.0",
  "jest-enzyme": "^7.1.2",

package.json

@@ -9,17 +9,18 @@ exports[`Events Component Matches the snapshot 1`] = `
  >
  Event & Snapshot Test
  </h1>
- <div
+ <h2
  data-test="counter-value"
  >
  0
- </div>
+ </h2>
  <button
- className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
+ className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-sghohy-MuiButtonBase-root-MuiButton-root"
  data-test="increment-btn"
  disabled={false}
  onBlur={[Function]}
  onClick={[Function]}
+ onContextMenu={[Function]}
  onDragLeave={[Function]}
  onFocus={[Function]}
  onKeyDown={[Function]}
@@ -33,21 +34,16 @@ exports[`Events Component Matches the snapshot 1`] = `
  tabIndex={0}
  type="button"
  >
- <span
- className="MuiButton-label"
- >
- Increment
- </span>
+ Increment
  </button>
- <br />
- 
- <br />
+  
  <button
- className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
+ className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-sghohy-MuiButtonBase-root-MuiButton-root"
  data-test="decrement-btn"
  disabled={false}
  onBlur={[Function]}
  onClick={[Function]}
+ onContextMenu={[Function]}
  onDragLeave={[Function]}
  onFocus={[Function]}
  onKeyDown={[Function]}
@@ -61,11 +57,7 @@ exports[`Events Component Matches the snapshot 1`] = `
  tabIndex={0}
  type="button"
  >
- <span
- className="MuiButton-label"
- >
- Decrement
- </span>
+ Decrement
  </button>
 </div>
 `;

src/Components/Events/__snapshots__/Events.test.js.snap

@@ -20,22 +20,22 @@ const styles = () => ({
  },
 });
 
-const ButtonAppBar = (props) => {
+const Header = (props) => {
 
  const { classes } = props;
 
  return (
  <div className={classes.root}>
  <AppBar position='static'>
  <Toolbar>
- <IconButton edge='start' className={classes.menuButton} color='inherit' aria-label='menu' data-test='menu-icon'>
+ <IconButton edge='start' className={classes.menuButton} color='inherit' aria-label='menu' data-testid='menu-icon'>
  <MenuIcon />
  </IconButton>
- <Typography variant='h6' className={classes.title} data-test='menu-title'>React Unit Testing with Jest and Enzyme</Typography>
+ <Typography variant='h6' className={classes.title} data-testid='menu-title'>React Unit Testing with Jest and Enzyme</Typography>
  <Button color='inherit'>Login</Button>
  </Toolbar>
  </AppBar>
  </div>
  )
 }
-export default withStyles(styles)(ButtonAppBar);
+export default withStyles(styles)(Header);

src/Components/Header/Header.js

@@ -1,6 +1,7 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import Header from './Header'
+import React from 'react';
+import { mount } from 'enzyme';
+import { render, fireEvent, screen } from "@testing-library/react";
+import Header from './Header';
 
 /**
  * shallow():- method is used to render the single component that we are testing. 
@@ -21,17 +22,17 @@ describe('Header Component', () => {
 
  let wrapper
  beforeEach(() => {
- wrapper = shallow(<Header />)
+ wrapper = render(<Header />);
  })
 
- test('render without errors', () => {
- let component = wrapper.find(`[data-test='menu-icon']`)
- expect(component.length).toBe(1)
+ test('should check the menu icon', () => {
+ const component = screen.getByTestId("menu-icon");
+ expect(component);
  })
 
- test('title', () => {
- let title = wrapper.find(`[data-test='menu-title']`).text()
- expect(title).toMatch('Testing React App')
+ test('should check the header component title', () => {
+  const title = screen.getByTestId("menu-title").text;
+ expect(title).toMatch('React Unit Testing with Jest and Enzyme')
  })
 
 })

src/Components/Header/Header.test.js

@@ -20,7 +20,7 @@ export default class RestAPI extends Component {
  async componentDidMount() {
  try {
  const response = await axios.get(`https://jsonplaceholder.typicode.com/users`)
- const results = response.data
+ const results = response ? response.data : "";
  this.setState({ results })
  } catch (error) { 
  console.log(error);

src/Components/RestAPI/RestAPI.js

@@ -6,7 +6,7 @@ import '@testing-library/jest-dom';
 import Enzyme from 'enzyme'
 import 'jest-enzyme'
 import '@testing-library/jest-dom/extend-expect'
-import Adapter from 'enzyme-adapter-react-17-updated'
+import Adapter from '@mnajdova/enzyme-adapter-react-18'
 import { createSerializer } from 'enzyme-to-json'