酶不会“渲染、挂载或浅化”组件,因为未定义依赖项

Posted

技术标签:

【中文标题】酶不会“渲染、挂载或浅化”组件,因为未定义依赖项【英文标题】:Enzyme wont 'render, mount, or shallow' a component because a dependency is undefined 【发布时间】:2018-10-28 06:52:13 【问题描述】:

我想弄清楚为什么我的测试无法运行。我有一个 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] / 16em) 
        $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();

  );

);

我是反应测试的新手,并不真正了解如何模拟该功能或告诉 jest 忽略它。

我正在使用带有所需酶适配器和 jest-styled-components 测试插件的 react 16+。

【问题讨论】:

【参考方案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();
    );
);

【讨论】:

以上是关于酶不会“渲染、挂载或浅化”组件,因为未定义依赖项的主要内容,如果未能解决你的问题,请参考以下文章

无法读取未定义单元测试酶的属性“contextTypes”

Gradle javax.jms 依赖项未下载

Gradle 依赖项未列出本地 maven jar 的依赖项

所需的依赖项未更新

酶测试问题返回未定义

使用酶和主题测试样式化组件