wojtekmaj / enzyme-adapter-react-17

Unofficial adapter for React 17 for Enzyme.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot read property 'child' of undefined

cnotario opened this issue · comments

Hi,
thanks for your support. I got the following error:

 FAIL  src/tests/components/auth/mytest.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'child' of undefined

      4 | import Hello from "../../../components/auth/Hello";
      5 | 
    > 6 | const wrapper = mount(<Hello/>);
        |                 ^
      7 | 
      8 | describe("Test", () => {
      9 | 

      at getFiber (node_modules/@wojtekmaj/enzyme-adapter-react-17/src/detectFiberTags.js:15:31)
      at detectFiberTags (node_modules/@wojtekmaj/enzyme-adapter-react-17/src/detectFiberTags.js:75:15)
      at ReactSeventeenAdapter.createMountRenderer (node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:421:19)
      at ReactSeventeenAdapter.createRenderer (node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:790:51)
      at new ReactWrapper (node_modules/enzyme/src/ReactWrapper.js:113:32)
      at mount (node_modules/enzyme/src/mount.js:10:10)
      at Object.<anonymous> (src/tests/components/auth/mytest.test.js:6:17)

My test:

import "@testing-library/jest-dom";
import React from "react";
import { mount } from "enzyme";
import Hello from "../../../components/auth/Hello";

const wrapper = mount(<Hello/>);

describe("Test", () => {

  test("<Hello></Hello> works", () => {
    expect(wrapper).toMatchSnapshot();
  });

});

My component:

import React from 'react'

export default function Hello() {
    return (
        <div>
          <h1>Hello</h1>  
        </div>
    )
}

Configuration:

import '@testing-library/jest-dom/extend-expect';

import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import {createSerializer} from 'enzyme-to-json';

Enzyme.configure({ adapter: new Adapter() });
expect.addSnapshotSerializer(createSerializer({mode: 'deep'}));

Package.json

{
  "name": "journal-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "firebase": "^8.3.1",
    "moment": "^2.29.1",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "sweetalert2": "^10.15.6",
    "validator": "^13.5.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
    "cloudinary": "^1.25.1",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.1",
    "redux-mock-store": "^1.5.4"
  }
}

You're using React 16. Use adapter for React 16.

I am learning react but I didn't realise it. I'm sorry for that. Thanks