Реактивный тест с шуткой не учитывает moduleNameMapper из псевдонимов веб-пакета - PullRequest
Новая
       22

Реактивный тест с шуткой не учитывает moduleNameMapper из псевдонимов веб-пакета

4 голосов
/ 20 марта 2019

Я использую шутку и фермент, чтобы проверить свой реактивный компонент. Я также использую значки чертежей как одну из зависимостей в моем компоненте реакции. Как часть моей конфигурации webpack, добавлено следующее: 

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

Следующее добавлено как часть конфигурации jest: 

    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 

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

Когда я пытаюсь протестировать этот компонент, проверка завершается с

TypeError: Невозможно прочитать свойство 'HOME' из неопределенного в IconNames.HOME

Вот некоторые пакеты, указанные в моем 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"

Я использую реакцию 16.2.0

Я пытался насмехаться над этим, но он не работает (возможно, я делаю это неправильно), но вот код, который я использую: 

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

Ответы [ 2 ]

1 голос
/ 10 июня 2019

Я думаю, что имитация - это возможное решение - точно не знаю, почему ваш код не работает (возможно, потому что его нет в ключе default, или имя макета неверно), но вы можете попробовать что-то другое.

  1. В конфигурации Jest добавьте следующее: 
"setupFiles": [
    "./__mocks__/mockIcons.js"
],
Создать /__mocks__ папку в корневой папке Создать mockIcons.js внутри __mocks__ со следующим кодом: 
jest.mock("blueprint", () => ({
    default: {
        Icon: { SIZE_LARGE: 'large' }
    }
}))

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

Попробуйте использовать @blueprintjs/icons какпсевдоним, если ничего не работает.

0 голосов
/ 12 июня 2019

Для меня сработало следующее решение:

В конфигурации jest: 

moduleNameMapper: {
        '^blueprint': '<rootDir>/node_modules/@blueprintjs/core',
        '^@blueprintjs/(.*)$': '<rootDir>/node_modules/@blueprintjs/$1'
}

Остальное все осталось прежним.

...