将开玩笑的数据传递给已安装的组件

Question

我正在尝试测试使用上下文的组件。在我挂载它之后（shallow 显然不适用于 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(文本)

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>
  );
};

你应该为你的updateAlert函数使用useCallback钩子来记忆它。