用笑话进行反应测试不支持Webpack别名中的moduleNameMapper

问题描述

我正在使用玩笑和酶来测试我的反应成分.我还将蓝图图标用作我的react组件中的依赖项之一.作为我的webpack配置的一部分，添加了以下内容:

I am using jest and enzyme to test my react component. I am also using blueprint icons as one of the dependency in my react component. As part of my webpack config, following is added:

config.resolve.alias = {
    blueprintIcons: path.resolve('./node_modules/@blueprintjs/icons'),
    blueprint: path.resolve('./node_modules/@blueprintjs/core')
};

以下是jest配置的一部分:

Following is added as part of jest config:

    rootDir: '.',
    roots: [
        '<rootDir>/__test__/'
    ],
    transformIgnorePatterns: [
        '<rootDir>/node_modules/'
    ],
    transform: {
        '^.+\\.jsx?$': 'babel-jest'
    },
    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.jsx?$',
    moduleDirectories: ['node_modules'],
    moduleFileExtensions: [
        'js',
        'jsx',
        'json',
        'node'
    ],
    moduleNameMapper: {
        '\\.(css|scss)$': 'identity-obj-proxy',
        blueprintIcons: '<rootDir>/node_modules/@blueprintjs/core'
        blueprint: '<rootDir>/node_modules/@blueprintjs/core'
    },
    snapshotSerializers: ['enzyme-to-json/serializer']
};

这是我的组成部分:

import React, { Component } from 'react';
import Icon from 'blueprint';
import IconNames from 'blueprintIcons';
class Foo extends Component {
  render() {
      return (
        <div>
           <p>Hello Foo</p>
           <Icon icon={IconNames.HOME} iconSize={Icon.SIZE_LARGE}/>
        </div>
      );
  }
}
export default Foo;

这是我的foo.test.js

Here is my foo.test.js

import React from 'react';
import Foo from '../../src/Components/Foo';
import Adapter from 'enzyme-adapter-react-16';
import Enzyme, { mount, shallow } from 'enzyme';

describe('Reviews component', () => {
    it('render component when loading in progress', () => {
        const mountedComponent = mount(<Foo />);
    });
});

当我尝试测试该组件时，测试失败并显示

When I am trying to test that component, the test fails with

这是我的package.json中指定的一些软件包

Here are some packages specified in my package.json

"babel-cli": "6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.0.1",
"babel-loader": "7.1.4",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"jest": "^23.1.0",
"jest-html-reporter": "^2.3.0",
"@blueprintjs/core": "^2.3.1",
"react": "16.2.0"

我正在使用React 16.2.0

I am using react 16.2.0

我尝试模拟它，但是不起作用(也许我没有正确执行)，但这是我正在使用的代码:

I tried mocking it but doesn't work(maybe I am not doing it correctly) but here is the code which I am using:

jest.mock('@blueprintjs/icons', () => (
    { IconNames: {HOME: 'home' }}));

推荐答案

我认为模拟是一种可能的解决方案-不确定为什么您的代码无法正常工作(可能是因为它不在default项之内，或者名称不在模拟不正确)，但是您可以尝试其他方法.

I think mocking is a possible solution - Not sure exactly why your code is not working (possibly because it's not within the default key, or the name of the mock is incorrect), but you can try something else.

1. 在您的Jest配置中，添加以下内容:

"setupFiles": [
    "./__mocks__/mockIcons.js"
],

1. 在您的根文件夹中创建/__mocks__文件夹
2. 在__mocks__中使用以下代码创建mockIcons.js:

1. Create /__mocks__ folder in your root folder
2. Create mockIcons.js inside __mocks__ with the following code:

jest.mock("blueprint", () => ({
    default: {
        Icon: { SIZE_LARGE: 'large' }
    }
}))

jest.mock("blueprintIcons", () => ({
    default: {
        IconNames: { HOME: 'home' }
    }
}))

如果没有其他作用，请尝试使用@blueprintjs/icons作为模拟名称.

Try to use @blueprintjs/icons as the mock name if nothing else works.

这篇关于用笑话进行反应测试不支持Webpack别名中的moduleNameMapper的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！