Jest測(cè)試中的嵌套組件渲染

在Jest測(cè)試中，當(dāng)你需要測(cè)試一個(gè)包含嵌套組件的React組件時(shí)，你可以使用mount函數(shù)來(lái)完成整個(gè)組件樹(shù)的渲染。這里是一個(gè)簡(jiǎn)單的例子，展示了如何使用enzyme庫(kù)中的mount函數(shù)來(lái)測(cè)試一個(gè)包含嵌套組件的React組件。

首先，安裝enzyme和enzyme-adapter-react庫(kù)：

npm install --save enzyme enzyme-adapter-react-16

然后，配置enzyme適配器。在項(xiàng)目的根目錄下創(chuàng)建一個(gè)名為setupTests.js的文件，并添加以下內(nèi)容：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

現(xiàn)在，假設(shè)你有一個(gè)名為ParentComponent的組件，它包含一個(gè)名為ChildComponent的嵌套組件。ParentComponent的代碼如下：

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    <div>
      <h1>Parent Component</h1>
     <ChildComponent />
    </div>
  );
};

export default ParentComponent;

ChildComponent的代碼如下：

import React from 'react';

const ChildComponent = () => {
  return <p>Child Component</p>;
};

export default ChildComponent;

要測(cè)試這個(gè)嵌套組件，你可以編寫一個(gè)名為ParentComponent.test.js的測(cè)試文件，如下所示：

import React from 'react';
import { mount } from 'enzyme';
import ParentComponent from './ParentComponent';
import ChildComponent from './ChildComponent';

describe('ParentComponent', () => {
  it('renders the ChildComponent', () => {
    const wrapper = mount(<ParentComponent />);
    expect(wrapper.find(ChildComponent).length).toBe(1);
  });
});

在這個(gè)測(cè)試中，我們使用mount函數(shù)來(lái)渲染ParentComponent及其嵌套的ChildComponent。然后，我們使用find方法查找ChildComponent，并期望找到一個(gè)實(shí)例。如果找到了一個(gè)實(shí)例，那么測(cè)試就通過(guò)了。