Question

如何在 Jest 中模拟节点库

2020-04-07

3677

node.js reactjs testing mocking jestjs

由于使用了一个翻译库调用 'react-simple-i18n' ，我在模拟我的一个 React 组件时卡住了。

在我的 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: Cannot destructure property t of 'undefined' or 'null'.

我怎样才能正确模拟我的 useI18n 函数？

Answer 1

您可以使用 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