Cannot read property 'child' of undefined
cnotario opened this issue · comments
cnotario commented
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"
}
}
Wojciech Maj commented
You're using React 16. Use adapter for React 16.
cnotario commented
I am learning react but I didn't realise it. I'm sorry for that. Thanks