使用Jest和酶测试基于ContextAPI数据的组件的条件渲染

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

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const MyComponent = () => {
  const { data } = useContext(MyContext);

  return (
    <div>
      {data ? <p>Data is available</p> : <p>No data</p>}
    </div>
  );
};

export default MyComponent;

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
import { MyContext } from './MyContext';

describe('MyComponent', () => {
  it('renders "Data is available" when data exists in the context', () => {
    const contextData = { data: 'Sample data' };
    const wrapper = shallow(
      <MyContext.Provider value={contextData}>
        <MyComponent />
      </MyContext.Provider>
    );
    expect(wrapper.find('p').text()).toEqual('Data is available');
  });

  it('renders "No data" when data does not exist in the context', () => {
    const contextData = { data: null };
    const wrapper = shallow(
      <MyContext.Provider value={contextData}>
        <MyComponent />
      </MyContext.Provider>
    );
    expect(wrapper.find('p').text()).toEqual('No data');
  });
});