首页 文章

酶不会'render, mount, or shallow'一个组件,因为依赖是未定义的

提问于
浏览
0

我想弄清楚为什么我的测试不会运行 . 我有一个React功能组件,它包含一个样式组件,它使用自定义方法生成一个媒体查询,该查询将被导入为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测试插件 .

1 回答

  • 0

    如果有其他人遇到这个,我找到了答案,它解释了很多关于测试的性质 .

    在测试时,您只想一次测试一个组件或操作的功能(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();
        });
    });
    

相关问题