Как издеваться над библиотекой узлов в шутку - PullRequest
Новая
       13

Как издеваться над библиотекой узлов в шутку

0 голосов
/ 07 апреля 2020

Я застрял в одном из моих компонентов React из-за одного вызова библиотеки перевода 'response-simple-i18n'

В моем компоненте React мне нужно импортировать одну функцию из эта библиотека, чтобы использовать ее, как показано ниже: 

import { useI18n } from 'react-simple-i18n/lib/'

const MyComponent = ({ data }) => {
  const { t } = useI18n()

  return( 
    <div>{t('MyComponent.hello') }</div>
  )
}

и если я пытаюсь проверить с Jest (простой снимок) 

import React from 'react'
import { shallow } from 'enzyme'
import MyComponent from './MyComponent'
import { useI18n } from 'react-simple-i18n'

const fakeData = { ... }

jest.mock('react-simple-i18n', () => {
  useI18n: () => { t: 'test' }
})

let wrapper = shallow(<MyComponent data={fakeData}/>)

describe('MyComponent', () => {
  it('should render MyComponent correctly', () => {
    expect(wrapper).toMatchSnapshot();
  })
})

И я получаю ошибку от Jest:

TypeError: Невозможно деструктурировать свойство t из 'undefined' или 'null'.

Как я могу точно посмеяться над своей функцией useI18n?

1 Ответ

1 голос
/ 08 апреля 2020

Вы можете использовать jest.mock (moduleName, factory, options) для макета библиотеки.

Например,

index.jsx: 

import { useI18n } from 'react-simple-i18n';
import React from 'react';

const MyComponent = ({ data }) => {
  const { t } = useI18n();
  return <div>{t('MyComponent.hello')}</div>;
};

export default MyComponent;

index.test.jsx: 

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './';
import { useI18n } from 'react-simple-i18n';

jest.mock(
  'react-simple-i18n',
  () => {
    const mUseI18n = { t: jest.fn().mockReturnValue('test') };
    return {
      useI18n: jest.fn(() => mUseI18n),
    };
  },
  { virtual: true },
);

describe('MyComponent', () => {
  it('should render MyComponent correctly', () => {
    const fakeData = {};
    let wrapper = shallow(<MyComponent data={fakeData} />);
    expect(wrapper.text()).toBe('test');
    expect(useI18n).toBeCalledTimes(1);
    expect(useI18n().t).toBeCalledWith('MyComponent.hello');
  });
});

результаты модульного теста со 100% покрытием: 

 PASS  stackoverflow/61083245/index.test.jsx (8.334s)
  MyComponent
    ✓ should render MyComponent correctly (8ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.jsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.417s

исходный код: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/61083245

...