Reest Jest将数据传递到已安装的组件

Question

我正在尝试测试使用上下文的组件。挂载后（浅表显然无法与useContext配合使用），我试图为组件数据设置默认值。

我期望const contextValues = { text: 'mock', msg: 'SUCCESS' };并将其传递给AlertContextProvider来设置该组件的状态，但是我可能正在以错误的方式看待。

AlertContext.js：

import React, { createContext, useState, useContext } from 'react';

export const AlertContext = createContext();


const AlertContextProvider = props => {
  const [alert, setAlert] = useState({
    text: '',
    msg: ''
  });

  const updateAlert = (text, msg) => {
    setAlert({
      text,
      msg
    });
  };
  return (
    <AlertContext.Provider value={{ alert, updateAlert }}>
      {props.children}
    </AlertContext.Provider>
  );
};

export default AlertContextProvider;

Alert.js（组件）：

import React, { useContext } from 'react';
import './Alert.scss';
import { AlertContext } from '../context/AlertContext';

const Alert = () => {
  const { alert } = useContext(AlertContext);

  return (
    <div className='alert'>
      <p className="alert-para">{alert.text}</p>
    </div>
  );
};

export default Alert;

Alert.js（text）

import React from 'react';
import { mount } from 'enzyme';
import Alert from '../components/Alert';
import AlertContextProvider from '../context/AlertContext';

describe('Alert', () => {
  let wrapper;
  beforeEach(() => {
    const contextValues = { text: 'mock', msg: 'SUCCESS' };

    // Below mounting is  needed as Enzyme does not yet support shallow mocks
    wrapper = mount(
      <AlertContextProvider value={contextValues}>
        <Alert />
      </AlertContextProvider>
    );
  });

  test('Should render a  paragraph', () => {
    const element =wrapper.find('.alert-para');
    expect(element.length).toBe(1); // this is correct
    expect(element.text()).toEqual('mock'); // THIS FAILS AS THE VALUE OF THE ELEMENT IS AN EMPTY STRING WHILE I WAS EXPECTING 'mock'
  });
});

Answer 1

您正在通过contextValues上的value道具传递<AlertContextProvider />，但从未使用该道具在上下文提供者内部初始化数据。

在此示例中，我使用useEffect钩子作为componentDidMount来初始化状态AlertContext.js`

const AlertContextProvider = props => {
  const [alert, setAlert] = useState({
    text: '',
    msg: ''
  });

  // The same as component did mount
  useEffect(() => {
    setAlert({
      text: props.value.text,
      msg: props.value.msg
    })
  }, [])


  const updateAlert = (text, msg) => {
    setAlert({
      text,
      msg
    });
  };

  return (
    <AlertContext.Provider value={{ alert, updateAlert }}>
      {props.children}
    </AlertContext.Provider>
  );
};

您应该在useCallback功能上使用updateAlert钩子来记住它。