如何在父测试中测试子组件渲染

Question

收到此错误，但我相信组件已正确导出：

VariableDeclaration 的属性声明 [0] 预期节点的类型为 ["VariableDeclarator"] 但未定义

父组件：

import React from 'react';
import Link from '../link/Link';

import * as Styled from './Header.style';

class Header extends React.Component {
    render() {
        return (
            <Styled.Header>
                <Link href={'/'} passHref>Home</Link>
                <Link href={'/about'} passHref>About</Link>
            </Styled.Header>
        );
    }
}

export default Header;

子组件：

import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

import * as Styled from './Link.style';

const NavLink = ({ href, children }) => {
    const router = useRouter();
    const toggleActive = router.pathname === href ? 'active' : null;

    return (
        <Link href={href} passHref>
            <Styled.Link className={toggleActive}>{children}</Styled.Link>
        </Link>
    );
};

export default NavLink;

家长测试：

jest.mock('./Header.style');
jest.mock('../link/Link', () => {
     const Link = () => <div>Mocked component</div>;
     return Link;
});

import * as React from 'react';
import { mount } from 'enzyme';
import Link from '../link/Link';
import * as Styled from './Header.style';
import Header from './Header';

describe('Header', () => {
    describe('When mounted', () => {
        let wrapper;

        beforeAll(() => {
            wrapper = mount(<Header />);
        });

        it('Should render <Link /> components', () => {
            expect(wrapper.find(Link).length).toBe(2);
        });

        afterAll(() => {
            jest.resetAllMocks();
        });
    });
});

package.json

"dependencies": {
  "next": "^11.1.2",
  "react": "^16.14.0",
  "react-dom": "^16.14.0"
},
"devDependencies": {
  "@babel/plugin-transform-runtime": "^7.15.0",
  "@babel/preset-env": "^7.15.0",
  "@babel/preset-react": "^7.14.5",
  "babel-core": "^6.26.3",
  "babel-eslint": "^10.1.0",
  "babel-jest": "^27.1.0",
  "babel-plugin-styled-components": "^1.13.2",
  "enzyme": "^3.11.0",
  "enzyme-adapter-react-16": "^1.15.6",
  "eslint": "7.32.0",
  "eslint-config-next": "11.1.2",
  "eslint-plugin-react": "^7.25.1",
  "jest-cli": "^27.1.0",
  "jest-styled-components": "^6.3.4",
  "styled-components": "^4.4.1"
}

反应钩子组件（子组件）是否有可能因任何原因而被嘲笑。即使我在没有模拟 wrapper.debug() 的情况下引入实际组件也不会控制台记录它。

Answer 1

也许您可以尝试使用 jest.spyOn 来解决它。我有类似的问题，可以这样解决它

快速草稿（未测试）：

import * as React from 'react';
import { mount } from 'enzyme';
import * as Link from '../link/Link'
import * as Styled from './Header.style';
import Header from './Header';

describe('Header', () => {
    describe('When mounted', () => {
        let wrapper;
        let linkSpy;

        beforeAll(() => {
            linkSpy = jest.spyOn(Link, 'Link')
            linkSpy.mockImplementation(() => <div>Link</div>)
            wrapper = mount(<Header />);
        });

        it('Should render <Link /> components', () => {
            // I do not know if this will work anymore, I'm not familiar with enzyme that much
            expect(wrapper.find(Link).length).toBe(2);
        });

        afterAll(() => {
            linkSpy.mockRestore();
            jest.resetAllMocks();
        });
    });
});