Как поднять шутливую зависимость над реальной зависимостью? - PullRequest
Новая
       26

Как поднять шутливую зависимость над реальной зависимостью?

0 голосов
/ 18 марта 2019

Я тестирую реактивный компонент, который импортирует класс LanguageStore. В настоящее время тест не пройден, потому что компонент создает экземпляр этого класса, который вызывает закрытый установщик, который не определен в области теста: 

FAIL  src\modules\languageProvider\__tests__\LanguageProvider-test.js
  ● renders correctly

    TypeError: _this.strings.setLanguage is not a function

      at LanguageStore.setLanguage (src\modules\languageProvider\LanguageStore.js:25:15)
      at new LanguageProvider (src\modules\languageProvider\LanguageProvider.js:30:16)

Вопрос:

Как поднять шутливую зависимость над реальной зависимостью?

Чтобы решить эту проблему, я позвонил jest.mock в соответствии с моим ответом Как я могу издеваться над импортом модуля ES6 с помощью Jest? . Но я получаю ту же ошибку, что и раньше, потому что тест вызывает реализацию LanguageStore, а не макет, который я создал ниже - _this.strings.setLanguage is not a function: 

import { View } from 'react-native';
import React from 'react';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';
import connect from '../connect.js';
import LanguageProvider from '../LanguageProvider';
import LanguageStore from '../LanguageStore';

it('renders correctly', () => {

  const TestComponent = connect(Test);
  const strings = { test: 'Test' };
  const language = "en"

  const stringsMock = {
    setLanguage: jest.fn()
  };

  const mockSetLanguage = jest.fn();
  jest.mock('../LanguageStore', () => () => ({
    language: language,
    strings: stringsMock,
    setLanguage: mockSetLanguage,
  }));

  const wrapper = shallow(<LanguageProvider strings={strings} language="en"><Test /></LanguageProvider>);

  expect(wrapper.get(0)).toMatchSnapshot();

});


class Test extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <View />;
  }
}

Это ссылка на тестируемые и связанные с ним компоненты и тестируемые классы:

https://github.com/BrianJVarley/react-native-prototyping/blob/i18nProvider-feature/src/modules/languageProvider/tests/LanguageProvider-test.js

1 Ответ

1 голос
/ 19 марта 2019

Вызов jest.mock в тесте не работает .

Вам нужно переместить макет за пределы теста и убедиться, что ваша заводская функция не имеетвнешние зависимости.

Примерно так: 

import { View } from 'react-native';
import React from 'react';
import { shallow } from 'enzyme';
import connect from '../connect.js';
import LanguageProvider from '../LanguageProvider';
import LanguageStore from '../LanguageStore';

jest.mock('../LanguageStore', () => {
  const language = "en"
  const stringsMock = {
    setLanguage: jest.fn()
  };
  const mockSetLanguage = jest.fn();

  return () => ({
    language,
    strings: stringsMock,
    setLanguage: mockSetLanguage,
  })
});

it('renders correctly', () => {
  const TestComponent = connect(Test);
  const strings = { test: 'Test' };
  const wrapper = shallow(<LanguageProvider strings={strings} language="en"><Test /></LanguageProvider>);
  expect(wrapper.get(0)).toMatchSnapshot();
});


class Test extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <View />;
  }
}
...