酶不会“渲染，装载或浅化”组件，因为依赖关系未定义

Question

我想弄清楚为什么我的测试不会运行。我有一个React功能组件，它包含一个样式组件，它使用自定义方法生成一个媒体查询，该查询将被导入为css帮助文件。我得到let red = Colour([255,0,0]) // Colour let invalidColour = Colour([255]) // nil let invalidColour2 = Colour([255,2,3,4]) // nil let invalidColour3 = Colour([255,-1,256]) // nil let randomColour = Colour([1,5,231]) // Colour // you can use the RGB cases to access the respective values in the collection randomColour?[.red] // 1 。这是我的代码。

的CSS / index.js

TypeError: Cannot read property 'medium' of undefined

myComponent的

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

})();

我的测试文件

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

我是新手做出反应测试，并不真正了解如何模拟该功能或告诉开玩家忽略它。

我使用反应16+与所需的酶适配器和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(); }); }); 测试插件。

Answer 1

如果其他人遇到这个问题，我找到了答案，并解释了很多关于测试性质的内容。

进行测试时，您只想一次测试一个组件或操作的功能（UNIT TESTING）。通过尝试测试引入另一个依赖项的组件，我实际上试图一次测试两件事而没有意识到。

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