时间戳

首页 > 解决方案 > 在 React with Jest 中为 @material-ui withStyles 创建手动模拟

javascript - 在 React with Jest 中为 @material-ui withStyles 创建手动模拟

问题描述

我正在尝试为模块创建手动@material-ui/core/styles模拟，该模块导出名为withStyles.

使用内联模拟jest.mock可以完美地工作，但是当我尝试将此逻辑移动到可共享__mocks__文件夹中时，它不再起作用了。

我从正在测试的文件中删除了所有不必要的代码，只保留了创建问题的两行：

import { withStyles } from '@material-ui/core/styles';

console.log('loaded styles:', withStyles);

export default 'hello';

并且测试也简化了，只是为了看看模拟是否工作，如下：

import test from '../test';
console.log(test);

我尝试的是__mocks__在项目的根目录中创建一个文件夹，我有该node_modules文件夹。

在那里我创建了一个名为的第一个文件夹@material-ui，并在其中创建了另一个名为core. 在此文件夹中，我有一个styles.js使用以下代码调用的文件：

export const withStyles = 'hello world';

所以结构看起来像：

- __mocks__
  - @material-ui
    - core
      - styles.js
- node_modules

这是有效的代码，在同一测试文件中定义了模拟：

jest.mock('@material-ui/core/styles', () => ({
  withStyles: () => Component => props => (
    <Component
      classes=""
      {...props}
    />
  ),
}));

文件夹发生的事情__mocks__是，如果我不调用任何

jest.mock('@material-ui/core/styles');

在我的测试文件中，它使用了真正的withStyles，所以真正的模块。根本没有使用任何模拟。

如果我使用：

jest.mock('@material-ui/core/styles');

它使用由 jest 自动生成的自动模拟（或者看起来如此），跳过了我在上面定义的模拟。

只是关于软件包的说明，我用于CRA引导应用程序，jest我目前拥有的版本是 20，react-scripts版本为 1.0.17

感谢大家的帮助！

标签： javascriptreactjsmockingjestjsmaterial-ui

解决方案

我在我的项目中创建了文件src/__mocks__/@material-ui/core/styles.jsx，并在里面放了：

import * as Styles from '@material-ui/core/styles';
import React from 'react';

const withStyles = () => Component => props => <Component classes={{}} {...props} />;

module.exports = { ...Styles, withStyles };

推荐阅读