Блог

Главная - Вопросы по программированию - Предупреждение: Неудачный тип контекста: Контекст «видимый» отмечен как необходимый , но его значение «не определено»

Предупреждение: Неудачный тип контекста: Контекст «видимый» отмечен как необходимый , но его значение «не определено»

#reactjs #jestjs #enzyme

Вопрос:

Я пытаюсь протестировать компонент с контекстом, используя Enzyme и Jest, но каждый раз, когда я запускаю тест, я получаю это предупреждение:

 
console.error node_modules/react-dom/cjs/react-dom.development.js:67
      Warning: Failed context type: The context `visible` is marked as required in `Toast`, but its value is `undefined`.
          at Toast (/Users/alaeddine/Documents/open-source/react-toast/src/components/Toast/index.js:18:18)
          at WithContext (/Users/alaeddine/Documents/open-source/react-toast/src/components/Toast/withProvider.js:6:27)
          at WrapperComponent (/Users/alaeddine/Documents/open-source/react-toast/node_modules/@wojtekmaj/enzyme-adapter-utils/build/createMountWrapper.js:112:7)

Компонент

 import React, { useContext } from 'react';
import PropTypes from 'prop-types';

import { Container } from './Styled';
import { Header } from './Header';
import { Body } from './Body';

import VisibilityContext from './context';
import WithProvider from './withProvider';

const requiredPosition = {
   TOP_LEFT: 'TOPLEFT',
   TOP_RIGHT: 'TOPRIGHT',
   BOTTOM_LEFT: 'BOTTOMLEFT',
   BOTTOM_RIGHT: 'BOTTOMRIGHT',
};

const Toast = ({ message, title, withBorder, position }) => {
   const { visible } = useContext(VisibilityContext);

   if (withBorder amp;amp; typeof withBorder !== 'boolean') {
      throw new Error('withBorder should be a boolean');
   }

   if (typeof message !== 'string') {
      throw new Error('message should be a string');
   }
   if (typeof title !== 'string') {
      throw new Error('message should be a string');
   }
   if (position amp;amp; typeof position !== 'string' amp;amp; (position !== requiredPosition.TOP_LEFT || position !== requiredPosition.BOTTOM_LEFT || position !== requiredPosition.TOP_RIGHT || position !== requiredPosition.TOP_LEFT)) {
      throw new Error('position should be a string. These are the available positions:'   'TOP_LEFT | TOP_RIGHT | BOTTOM_RIGHT | BOTTOM_LEFT');
   }

   return (
      visible amp;amp; (
         <Container withBorder={withBorder} position={position}>
            <Header title={title} />
            <Body content={message} />
         </Container>
      )
   );
};

Toast.contextTypes = {
   visible: PropTypes.bool.isRequired,
};

Toast.propTypes = {
   title: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
};

export default WithProvider(Toast);
export { Header, Body };

Тест

 
import 'jsdom-global/register';
import React from 'react';
import renderer from 'react-test-renderer';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import Toast from './index';
import { Container } from './Styled';
import { Header } from './Header';
import { Body } from './Body';

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

describe('<Toast/>', () => {
   const props = {
      title: 'This is a title',
      message: 'This is a message',
      withBorder: true,
      position: 'TOP_RIGHT',
   };

   it('allows us to set props', () => {
     
     // passing the context but still getting the warning
     
      const toast = mount(<Toast {...props} />, { context: { visible: true } });
      expect(toast.prop('title')).toEqual('This is a title');
      expect(toast.prop('message')).toEqual('This is a message');
      expect(toast.prop('withBorder')).toEqual(true);
      expect(toast.prop('position')).toEqual('TOP_RIGHT');

   });

   //    it('renders one <StyledHeader> when passed in', () => {
   //       const context = {
   //          visible: true,
   //       };
   //       const { title, message, withBorder, position } = props;
   //       const toast = mount(<Toast {...props} />, { context }); // pass the context

   //       expect(
   //          toast.contains(
   //             context.visible amp;amp; (
   //                <Container withBorder={withBorder} position={position}>
   //                   <Header title={title} />
   //                   <Body content={message} />
   //                </Container>
   //             )
   //          )
   //       ).toBe(true);
   //    });

   //    test('has a valid snapshot', () => {
   //       const component = renderer.create(<Header {...props} />);
   //       const tree = component.toJSON();
   //       expect(tree).toMatchSnapshot();
   //    });
});

``
Метки: ,