Javascript 酶不会'；渲染、安装或浅层'；组件，因为依赖项未定义

我正试图弄明白为什么我的测试无法运行。我有一个React功能组件，其中包含一个样式化组件，该组件使用自定义方法生成一个媒体查询，该查询将被导入css帮助文件。我收到一个

类型错误：无法读取未定义的属性“medium”

。这是我的密码

css/index.js 真菌成分

从“css”导入{media}；
常量MyComponent=（{图标、标题、说明}）=>(
...
);
导出默认MyComponent；
const MyComponentContainer=styled.article`
最大宽度：300px；
宽度：100%；
边框：1px实心#000；
${media.media`
填充：0 25px；
`}
${media.large`
最大宽度：350px；
`}
`;

我的测试文件

从“React”导入React；
从“酶”导入{shall}；
从“组件/MyComponent”导入MyComponent；
描述（“”，（）=>{
它（'应该匹配快照'，（）=>{
常量捕捉=浅（）；
expect（snap）.toMatchSnapshot（）；
});
});

我是一个新的反应测试，并不真正理解如何嘲笑该功能或告诉jest忽略它

---

我将react 16+与所需的酶适配器和

jest样式的组件

test插件一起使用。如果其他人遇到这个问题，我找到了答案，它解释了很多关于测试的性质

当您进行测试时，您一次只想测试一个组件或操作的功能（单元测试）。通过测试一个拉入另一个依赖项的组件，我实际上是在一次测试两件事情而没有意识到这一点

MyComponent

组件需要与

media

标记的模板方法分开测试

在

MyComponent

中，我不关心从

媒体

标记模板方法返回的内容。我只关心调用了什么方法以及调用的参数

我可以为

媒体

方法设置另一个单独的测试，以确保这些方法按预期运行，并单独测试它们

因此，在

jest

中，您可以模拟模块导入

在我的测试文件中

从“React”导入React；
从“酶”导入{shall}；
从“组件”导入MyComponent；
jest.mock（'css'，（）=>({
媒体：{
small:jest.fn（），
中等：jest.fn（），
大：jest.fn（），
},
})
描述（'，（）=>{
它（'应该匹配快照'，（）=>{
常量捕捉=浅（）；
expect（snap）.toMatchSnapshot（）；
});
});

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

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

  });

});

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