Макет нестандартной функции с использованием Jest и React

Question

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

Файл 1

import {A, B} from 'a-module';

export function MyComponent() {
    return (
        <div>
            <A /> // I need to mock
            <B /> // these components out
        </div>
    );
}

Файл 2

import {MyComponent} from 'File 1';

/*
 * In this file I would like to render MyComponent but
 * have components A and B be replaced by mocks
 */

Я пытался сделать jest.mock('a-module', () => 'Blah');, но это не удалосьиздеваться над компонентами.Это работает, однако, при использовании импорта по умолчанию в файле 1.

Любая помощь в компоновке компонентов A и B при рендеринге MyComponent в файле 2 будет наиболее ценной!

Answer 1

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

jest.mock('a-module', () => ({
  __esModule: true,
  default: () => 'Blah',
  A: () => 'Blah',
  B: () => 'Blah'
}));

https://remarkablemark.org/blog/2018/06/28/jest-mock-default-named-export/

или использовать __mocks __

в качестве альтернативы вы можете создать файл в папке __mocks__ рядом с исходным модулем с тем же именем, что и модуль:

a_module_folder > 
    a-module.js
    __mocks__ >
        a-module.js

, и этот макет должен просто экспортировать проверенные версии:

export const A = () => 'Blah';
export const B = () => 'Blah';

, а затем просто издевайтесь так:

jest.mock ('a-module');

для node_modules просто поместите папку __mocks__ на тот же уровень, что и node_modules

https://jestjs.io/docs/en/manual-mocks

Answer 2

Тестирование компонентов React в основном выполняется с помощью Enzyme, если вы пытаетесь сделать это только с помощью Jest, вы, вероятно, выбрали не тот инструмент.Я могу только догадываться, зачем вам нужно издеваться над компонентом, но, скорее всего, вы сможете достичь этого с помощью Enzyme.

Существует Engrome shallow рендеринг , который специально создан для тестирования React.Сам Jest не способен на рендеринг компонентов.Определение по Документам Airbnb :

Мелкий рендеринг полезен, чтобы ограничиться тестированием компонента как единицы и гарантировать, что ваши тестыне косвенно утверждают о поведении дочерних компонентов.

Проще говоря, это сделает глубину тестируемого компонента на 1 уровне, например

// File2.js

import { MyComponent } from 'File1';
import { shallow } from 'enzyme';

describe('MyComponent', () => {
  it('should render shallowly my component', () => {
    const wrapper = shallow(<MyComponent />);
    console.log(wrapper.debug()); 
    // output:
    //   <div>
    //     <A />
    //     <B />
    //   </div>
    // Note: even if component <A /> is consisting of some markup, 
    // it won't be rendered 
  });
});

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

Вместо этого вы можете проверить, когда вы передаете определенные реквизиты на <MyComponent />, зависимые компоненты <A /> и <B /> получаютожидаемый реквизит.

const wrapper = shallow(<MyComponent foo={1} bar={2} />);
expect(wrapper.find('A').props().foo).toEqual(1);
expect(wrapper.find('B').props().bar).toEqual(2);