Фермент не будет «рендерить, монтировать или поверхностный» компонент, потому что зависимость не определена

Question

Я пытаюсь выяснить, почему мой тест не запускается.У меня есть функциональный компонент React, который содержит компонент styled, который использует собственный метод для генерации медиазапроса, который импортируется для вспомогательного файла css.Я получаю TypeError: Cannot read property 'medium' of undefined.Вот мой код.

css / index.js

export const media = (function(){

  const sizes = {
    large: 996,
    medium: 767,
    small: 656,
  };

  return Object.keys(sizes).reduce((acc, label) => {
    acc[label] = (...args) => css`
      @media (min-width: ${sizes[label] / 16}em) {
        ${css(...args)}
      }
    `;
    return acc;
  }, {});

})();

mycomponent

import { media } from 'css';

const MyComponent = ({ icon, title, description }) => (
  <MyComponentContainer>
    ...
  </MyComponentContainer>
);

export default MyComponent;

const MyComponentContainer = styled.article`
  max-width: 300px;
  width: 100%;
  border: 1px solid #000;
  ${media.medium`
    padding: 0 25px;
  `}
  ${media.large`
    max-width: 350px;
  `}
`;

Мой тестовый файл

import React from 'react';
import { shallow } from 'enzyme';

import MyComponent from 'components/MyComponent';

describe('<MyComponent />', () => {

  it('should match the snapshot', () => {

    const snap = shallow(<MyComponent />);
    expect(snap).toMatchSnapshot();

  });

});

Я новыйреагировать на тестирование и не совсем понимать, как имитировать эту функциональность или шутить, чтобы игнорировать ее.

Я использую реагирование 16+ с требуемым ферментным адаптером и тестовым плагином jest-styled-components.

Answer 1

В случае, если кто-то еще сталкивается с этим, я нашел ответ, и он многое объясняет о характере тестирования.

Когда вы тестируете, вы хотите протестировать функциональность только одного компонента илидействие за один раз (ЕДИНОЕ ТЕСТИРОВАНИЕ).Пытаясь протестировать компонент, который вытягивал другую зависимость, я фактически пытался протестировать две вещи одновременно, не осознавая этого.

Компонент MyComponent необходимо тестировать отдельно от теговых методов media.

В MyComponent мне все равно, что было возвращено из тега mediaшаблонный метод.Меня волнует только то, какой метод был вызван, и параметры вызова.

Я могу настроить другой отдельный тест для методов media, чтобы убедиться, что эти методы работают должным образом, и проверить их по отдельности.

Таким образом, в jest вы можете смоделировать импорт модуля.

внутри Моего тестового файла

import React from 'react';
import { shallow } from 'enzyme';

import MyComponent from 'components';

jest.mock('css', () => ({
   media: {
      small: jest.fn(),
      medium: jest.fn(),
      large: jest.fn(),
   },
})

describe('<MyComponent />, () => {
    it('should match snapshot', () => {
        const snap = shallow(<MyComponent />);
        expect(snap).toMatchSnapshot();
    });
});