{"draftJsState":{"blocks":[{"data":{"image":{"id":"620eb6c864f35100128f6388"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"drj84"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"8cgmo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написание тестов для проверки компонентов React — нелегкое занятие. Я потратил много времени на поиски правильных вариантов решения этой задачи и с трудом их нашел. Поэтому мне захотелось написать эту статью, чтобы поделиться с вами опытом и знаниями.","type":"unstyled","key":"9s2q5"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":23,"offset":63}],"inlineStyleRanges":[],"text":"Если вы хотите увидеть полноценный пример работы, взгляните на демонстрационный шаблон.","type":"unstyled","key":"3hj0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имитация","type":"header-three","key":"1vbl2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После настройки среды для работы Jest и библиотеки тестирования React вы можете обнаружить, что некоторые компоненты выходят из строя при рендеринге во время теста.","type":"unstyled","key":"9dr95"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это происходит потому, что компонент, отображаемый в тесте, может работать только в определенных средах. Обычно он настраивается в средах разработки и эксплуатации, но мы сымитируем “фейковую” среду при выполнении теста.","type":"unstyled","key":"6eqvl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я помещаю файлы, созданные в этом разделе, в каталог jest/mock/ и добавляю псевдоним @jest в файл webpack.config.js:","type":"unstyled","key":"cuens"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"alias: {\n '@js': path.resolve(__dirname, 'src/js/'),\n '@scss': path.resolve(__dirname, 'src/scss/'),\n '@img': path.resolve(__dirname, 'img/'),\n '@jest': path.resolve(__dirname, 'jest/')\n}","type":"unstyled","key":"c3e2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Его также нужно добавить в jest.config.js:","type":"unstyled","key":"4eboc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"moduleNameMapper: {\n '^@js(.*)$': '/src/js$1',\n '^@scss(.*)$': '/src/scss$1',\n '^@img(.*)$': '/img$1',\n '^@jest(.*)$': '/jest$1'\n},","type":"unstyled","key":"8gboc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имитация Redux","type":"header-three","key":"3u0np"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"1. Создайте копию реального хранилища (store).","type":"unstyled","key":"756vr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В некоторых случаях нужна только среда, которая может отрисовать компонент с состоянием по умолчанию. Это можно сделать, скопировав реальный файл истории и удалив ненужные конфигурации (например, для Redux DevTools).","type":"unstyled","key":"55avu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// jest/mock/store/index.js\n\nimport { createStore, applyMiddleware, compose } from 'redux'\nimport thunk from 'redux-thunk'\nimport reducer from '@js/reducers'\n\nconst composeEnhancers = compose\n\nconst middleware = [thunk]\nexport default createStore(\n reducer,\n composeEnhancers(applyMiddleware(...middleware))\n)","type":"unstyled","key":"9ufgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"2. Сымитируйте компонент Provider.","type":"unstyled","key":"24tnt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При использовании React с Redux нужно обернуть компоненты в компонент Provider из библиотеки react-redux. То же самое нужно сделать при рендеринге компонента в тесте. Чтобы избежать повторного написания одной и той же логики, создаем компонент для ее обработки:","type":"unstyled","key":"e4h77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// jest/mock/MockProvider.jsx\n\nimport { Provider } from 'react-redux'\n// используйте копию 1 в качестве хранилища по умолчанию\nimport store from './store'\n\nconst MockProvider = ({ children = null, mockStore = null }) => {\n return (\n \n { children }\n \n )\n}\n\nMockProvider.propTypes = {\n mockStore: PropTypes.object, // этот пропс позволяет нам установить store в определенное состояние\n children: PropTypes.node\n}\n\nexport default MockProvider","type":"unstyled","key":"1ipoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нам также нужно создать модуль для различных состояний store. Этот модуль будет использовать библиотеку redux-mock-store для создания имитированного store. Он также заменит атрибут dispatch имитированного store на имитированную функцию Jest, чтобы при необходимости можно было отслеживать состояние. Начальное состояние store можно установить с помощью специального параметра.","type":"unstyled","key":"dnp78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// jest/mock/store/createMockStore.js\n\nimport configureMockStore from 'redux-mock-store'\nimport thunk from 'redux-thunk'\nconst middleware = [thunk]\nexport default (initialState) => {\n const mockStore = configureMockStore(middleware)(initialState)\n // eslint-disable-next-line no-undef\n // замените метод dispatch \"шпионом\" и поддерживайте функциональность\n mockStore.dispatch = jest.fn(mockStore.dispatch)\n return mockStore\n}","type":"unstyled","key":"9l992"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имитация маршрутов и истории","type":"header-three","key":"7btqa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот и еще один похожий случай. Чтобы заставить работать компоненты, использующие библиотеку react-router-dom, нужно обернуть их в компонент Router. Для этого также можно создать модуль:","type":"unstyled","key":"98tpu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// jest/mock/mockRouter.jsx\n\nimport { Router } from 'react-router-dom'\nimport { createBrowserHistory } from 'history'\n\nconst MockRouter = ({ children }) => {\n return (\n \n { children }\n \n )\n}\n\nMockRouter.propTypes = {\n children: PropTypes.node // пропс для отправки компонентов, которые вы хотите отобразить\n}\n\nexport default MockRouter","type":"unstyled","key":"bc4ts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имитация модулей импорта","type":"header-three","key":"3hinc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В некоторых случаях необходимо имитировать модули (включая пакеты из npm) в тесте. Вот пример того, как это сделать:","type":"unstyled","key":"7lh9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { render, cleanup } from '@testing-library/react'\nimport MainPage from '../MainPage'\n\n// *** это должно быть записано в глобальной области видимости ***\n// сымитируйте библиотеку react-router-dom\n// и замените атрибут useHistory модуля\njest.mock('react-router-dom', () => ({\n useHistory: () => ({\n push: jest.fn()\n })\n}))\n\nafterEach(cleanup)\nbeforeEach(() => {\n // ...\n})describe('MainPage.jsx', () => {\n // ...\n}","type":"unstyled","key":"2ki9i"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":24,"offset":54}],"inlineStyleRanges":[],"text":"Подробнее об имитированных функциях можно прочитать в официальной документации, а больше примеров вы увидите позже.","type":"unstyled","key":"47lrq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что тестировать?","type":"header-three","key":"440k6"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":18,"offset":123}],"inlineStyleRanges":[],"text":"Автор react-testing-library — Kent C. Dodds — создал этот инструмент, чтобы помочь разработчикам избежать тестирования деталей реализации. Поэтому нам не нужно исправлять тестовые примеры при рефакторинге компонентов.","type":"unstyled","key":"cijh7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это означает, что вам нужно сосредоточиться на тестировании того, как пользователи взаимодействуют с компонентами. Пишите тесты так, будто пользователь взаимодействует с компонентом, и проверяйте, правильно ли компонент реагирует. Важно знать, как выполнять следующие действия.","type":"unstyled","key":"2pcsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Имитация пользователя","type":"header-three","key":"cffui"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":27,"offset":60}],"inlineStyleRanges":[],"text":"Для имитации пользователя можно воспользоваться библиотекой @testing-library/user-event. Возьмем fireEvent из библиотеки @testing-library/react для обработки событий, с которыми не может справиться user-event.","type":"unstyled","key":"bj9s4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Выполнение DOM-запросов","type":"header-three","key":"9urid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запросы из объекта screen","type":"unordered-list-item","key":"7aie8"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":9,"offset":198}],"inlineStyleRanges":[],"text":"После рендеринга компонента с помощью метода render вы можете получить доступ к результату с помощью объекта screen и выполнить запрос с его помощью. Подробнее об этом можно прочитать в официальной шпаргалке (там есть удобная таблица).","type":"unstyled","key":"7ohj5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запрос по className","type":"unordered-list-item","key":"511p6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объект screen не предоставляет метод для запроса по className, но все же есть способ сделать это. Вы можете получить корневой DOM с помощью атрибута container, а затем вызвать метод getElementsByClassName:","type":"unstyled","key":"ald6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { render } from '@testing-library/react'\n\nit('some description', () => {\n const screen = render()\n \nscreen.container.getElementsByClassName('')\n}","type":"unstyled","key":"9qaho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарии","type":"header-three","key":"a3vq9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"1. Простой компонент","type":"header-three","key":"dmgt7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рендеринг в соответствии с пропсами","type":"unordered-list-item","key":"1r0hm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы тестируете компоненты, которые различаются только пропсами, то нужно написать тесты для отправки различных пропсов компонентам и проверить их.","type":"unstyled","key":"daoc0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы упростить задачу, я возьму общий случай и напишу тесты только для:","type":"unstyled","key":"av0qu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"всех пропсов с истинным значением;","type":"unordered-list-item","key":"3pumq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"всех пропсов с ложным значением.","type":"unordered-list-item","key":"4gf0v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте библиотеку react-test-renderer для выполнения snapshot-теста для этих сценариев: так вы сэкономите время, которые потратили бы на выполнение запросов.","type":"unstyled","key":"eup25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { cleanup } from '@testing-library/react'\nimport renderer from 'react-test-renderer' // renderer for snapshot test\nimport UserInfo from '../UserInfo'\n\nafterEach(cleanup)\n\ndescribe('UserInfo.jsx', () => {\n it('snapshot renders correctly, truthy values', () => {\n const tree = renderer\n .create()\n .toJSON()\n expect(tree).toMatchSnapshot()\n })\n it('snapshot renders correctly, falsy values', () => {\n const tree = renderer\n .create()\n .toJSON()\n expect(tree).toMatchSnapshot()\n })\n})","type":"unstyled","key":"a1mnc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рендеринг в соответствии с редьюсерами","type":"unordered-list-item","key":"bodjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестирование компонентов, которые изменяются в зависимости от состояния редьюсеров, очень похоже на предыдущий случай. Вы можете сымитировать состояние редьюсеров при помощи установки в определенное значение и отрисовать компоненты. Затем, опять же, вы можете проверить результат, выполнив несколько запросов или snapshot-тестов:","type":"unstyled","key":"gg7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { cleanup } from '@testing-library/react'\nimport renderer from 'react-test-renderer'\nimport MockProvider from '@jest/mock/MockProvider'\nimport createMockStore from '@jest/mock/store/createMockStore'\nimport UserInfoV2 from '../UserInfoV2'\n\nafterEach(cleanup)\n\ndescribe('UserInfoV2.jsx', () => {\n it('snapshot renders correctly, truthy values', () => {\n const store = createMockStore({\n userInfo: {\n userId: '202200001',\n userName: 'Test User',\n userImg: './test_user.img'\n }\n })\n const tree = renderer\n .create(\n \n )\n .toJSON()\n expect(tree).toMatchSnapshot()\n })\n it('snapshot renders correctly, falsy values', () => {\n const store = createMockStore({\n userInfo: {\n userId: '',\n userName: '',\n userImg: ''\n }\n })\n const tree = renderer\n .create(\n \n )\n .toJSON()\n expect(tree).toMatchSnapshot()\n })\n})","type":"unstyled","key":"55ch9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"2. Компонент с интервалами и промисами","type":"header-three","key":"75bmo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы ждете, пока закончится какой-либо процесс, вам стоит попробовать запросы waitFor и findBy. Вы можете легко найти примеры таких запросов в интернете, поэтому я опущу их подробное описание.","type":"unstyled","key":"esem9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"3. Компонент с хуками","type":"header-three","key":"18mhn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как уже упоминалось в разделе “Имитация”, мы можем использовать jest для имитации всех импортированных модулей. То же самое касается и хуков!","type":"unstyled","key":"1gtpb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Параметры роутинга SPA","type":"unordered-list-item","key":"1taue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Предположим, у нас есть компонент DataPage, использующий хук useParams из библиотеки react-router-dom:","type":"unstyled","key":"f3mq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useParams } from 'react-router-dom'\n\nconst DataPage = (props) => {\n const { dataId = '' } = useParams()\n const data = {\n data1: 'this is the content form data 1',\n data2: 'this is the content form data 2',\n }\n return (\n

\n { \n data[dataId]\n ?

{data[dataId]}\n

\n :

content not found

\n }\n

\n )\n}\n\nexport default DataPage","type":"unstyled","key":"f8urg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже указан способ имитации значения, которое вернет useParams:","type":"unstyled","key":"b0m3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { screen, render, cleanup } from '@testing-library/react'\nimport DataPage from '../DataPage'\n\nafterEach(cleanup)\n\njest.mock('react-router-dom', () => ({\n ...jest.requireActual('react-router-dom'),\n useParams: () => ({\n dataId: 'data1'\n })\n}))\n\ndescribe('DataPage.jsx', () => {\n it('render the content if data exist', () => {\n render()\n screen.getByText('this is the content form data 1')\n })\n})","type":"unstyled","key":"1rcpu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользовательский хук возвращает функцию в массиве","type":"unordered-list-item","key":"57qh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Предположим, у нас есть компонент, подобный этому:","type":"unstyled","key":"40n84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useSearchData } from '@js/hooks/searchData'\n\nconst SearchPage = (props) => {\n const [search] = useSearchData() // пользовательский хук\n const onSearchButtonClick = () => {\n search()\n }\n\nreturn (\n

\n \n

\n )\n}\n\nexport default SearchPage","type":"unstyled","key":"6g9k8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете сымитировать пользовательский хук следующим образом:","type":"unstyled","key":"ekh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { screen, render, cleanup } from '@testing-library/react'\nimport userEvent from '@testing-library/user-event'\nimport SearchPage from '../SearchPage'\nimport { useSearchData } from '@js/hooks/searchData'\n\nafterEach(cleanup)\n\njest.mock('@js/hooks/searchData', () => {\n const spy = jest.fn()\n return {\n useSearchData: () => {\n return [spy]\n }\n }\n})\n\ndescribe('SearchPage.jsx', () => {\n it('render the content if data exist', () => {\n render()\n // инициализируйте импортированную функцию\n // и получите ссылку на \"шпиона\"\n const [search] = useSearchData()\n userEvent.click(screen.getByText('search'))\n expect(search).toHaveBeenCalled()\n })\n})","type":"unstyled","key":"bjae7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"4. Компонент с импортированными модулями","type":"header-three","key":"8i9ea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробнее рассмотрим тестирование компонента DataPage. В предыдущем примере мы можем сымитировать реализацию useParams только один раз.","type":"unstyled","key":"bbcnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы хотите сохранить маневренность, нужно сначала сымитировать весь модуль и использовать метод mockImplementationOnce или mockReturnValueOnce перед рендерингом компонента. Таким образом, вы можете сымитировать реализацию или возвращаемое значение функции для каждого тестового случая.","type":"unstyled","key":"1kg1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кроме того, если код в компоненте зависит от результата работы функции, имитирование реализации функции позволяет избежать ошибок.","type":"unstyled","key":"cejgi"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":8,"offset":41}],"inlineStyleRanges":[],"text":"import { screen, render, cleanup } from '@testing-library/react'\nimport { useParams } from 'react-router-dom'\nimport DataPage from '../DataPage'\n\nafterEach(cleanup)\n\njest.mock('react-router-dom', () => {\n const spy = jest.fn()\n return {\n ...jest.requireActual('react-router-dom'),\n useParams: spy\n }\n})\n\ndescribe('DataPage.jsx', () => {\n it('render the content if data exist', () => {\n useParams.mockImplementationOnce(() => ({\n dataId: 'data1'\n }))\n render()\n screen.getByText('this is the content form data 1')\n })\n it('render the hint if data does not exist', () => {\n useParams.mockReturnValueOnce({\n dataId: ''\n })\n render()\n screen.getByText('content not found')\n })\n})","type":"unstyled","key":"36rk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как правило, вы можете сымитировать всю библиотеку и продолжить следующим образом:","type":"unstyled","key":"pmbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jest.mock('react-router-dom')","type":"unstyled","key":"4s4vu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но если мы имитируем всю библиотеку react-router-dom, атрибут useParams по какой-то причине становится неопределенным, поэтому я использую способ, указанный в последнем примере.","type":"unstyled","key":"einir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"5. Компоненты, которые диспетчеризируют действия","type":"header-three","key":"q3cr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя мануалы настаивают на том, что тестирования деталей реализации стоит избегать, я все же считаю, что необходимо тестировать действия, которые осуществляют диспетчеризацию компонентов. В частности, меня интересуют следующие моменты.","type":"unstyled","key":"48r09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Время. Используется ли файл диспетчеризации в нужное время посредством нужного действия?","type":"unordered-list-item","key":"2l1uc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Параметры. Правильно ли переданы параметры в действие?","type":"unordered-list-item","key":"4sn5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы самостоятельно можете проверить время и параметры этих импортированных функций (включая импортированные модули, действия и библиотеки).","type":"unstyled","key":"2meuu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможно, пример ниже покажется странным, но я пытаюсь охватить более широкий сценарий в компоненте:","type":"unstyled","key":"2jet8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useEffect } from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\nimport {\n setSettings, // a plain object action\n startGetSettings // a redux-thunk action\n} from '@js/actions'\n\nconst DemoPage = (props) => {\n const dispatch = useDispatch()\n const { title = '' } = useSelector(state => state.settings) \n\nuseEffect(() => {\n dispatch(setSettings({\n title: 'Title set when the component mount.'\n }))\n }, []) \n\nconst onFetchClick = () => {\n dispatch(startGetSettings({ foo: 'bar' }))\n } \n\nreturn (\n

{title}

\n \n

\n )\n}\n\nexport default DemoPage","type":"unstyled","key":"e8brl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При тестировании действия, которое возвращает обычный объект, все просто:","type":"unstyled","key":"8m9qe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"it('should dispatch setSettings action when the component mount', () => {\n const mockStore = createMockStore({\n settings: {}\n })\n render(\n \n )\n // N-й элемент из результата метода getActions\n // будет объект, отправленный N-м диспетчером.\n expect(mockStore.getActions()[0].type).toBe(actions.SET_SETTINGS)\n expect(mockStore.getActions()[0].data.title).toBe('Title set when the component mount.')\n expect(mockStore.dispatch).toHaveBeenCalledTimes(1)\n})","type":"unstyled","key":"4879m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С другой стороны, задача усложняется при тестировании действия redux-thunk. Действия должны возвращать объект, и если сымитировать возвращаемое значение как промис, это приведет к ошибке.","type":"unstyled","key":"1svt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому я решил имитировать эти действия в общие действия:","type":"unstyled","key":"clk9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jest.mock('@js/actions', () => ({\n // сохраняем функциональность модуля действий\n ...jest.requireActual('@js/actions'),\n // замените thunk-action на обычное объектное действие\n // для проверки полученных параметров.\n startGetSettings: parameters => ({ type: 'MOCK', parameters })\n}))","type":"unstyled","key":"2824n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверьте время и параметры с помощью результата метода getActions:","type":"unstyled","key":"au96i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"it('should dispatch startGetSettings action when user click the button', async () => {\n const mockStore = createMockStore({\n settings: {}\n })\n render(\n \n )\n userEvent.click(screen.getByText('fetch settings'))\n await waitFor(() => {\n expect(mockStore.getActions()[1].parameters)\n .toEqual({ foo: 'bar' })\n expect(mockStore.dispatch).toHaveBeenCalledTimes(2)\n })\n})","type":"unstyled","key":"758cv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самое важное тут — правильно определить границы. Если вы пишете тесты для компонента, то нужно сосредоточиться на логике в этом компоненте. Достаточно протестировать время и параметры для импортированных функций. Для тестирования деталей в этих компонентах лучше создавать зависимые тестовые файлы.","type":"unstyled","key":"3aqjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"ceqvt"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":36,"offset":0}],"inlineStyleRanges":[],"text":"SonarQube: за качество кода отвечаем","type":"unordered-list-item","key":"bv30o"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":57,"offset":0}],"inlineStyleRanges":[],"text":"Как использовать библиотеку веб-компонентов React от Uber","type":"unordered-list-item","key":"efm"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":42,"offset":0}],"inlineStyleRanges":[],"text":"Версионирование независимых UI-компонентов","type":"unordered-list-item","key":"arrm2"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":8,"offset":14},{"key":11,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"cmdmp"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":12,"offset":15},{"key":13,"length":28,"offset":29}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи tabsteveyang: How to Test React Components","type":"unstyled","key":"ave37"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"n9sbPSVolimQDFmWyKJu"}],"entityMap":{"11":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://medium.com/@tabsteveyang","url":"https://medium.com/@tabsteveyang"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://javascript.plainenglish.io/how-to-test-react-components-2eff11d8cd75","url":"https://javascript.plainenglish.io/how-to-test-react-components-2eff11d8cd75"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/15235/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://github.com/tabsteveyang/react-jest-rtl-boilerplate","url":"https://github.com/tabsteveyang/react-jest-rtl-boilerplate"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://jestjs.io/docs/mock-functions","url":"https://jestjs.io/docs/mock-functions"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://kentcdodds.com/blog/testing-implementation-details","url":"https://kentcdodds.com/blog/testing-implementation-details"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://testing-library.com/docs/ecosystem-user-event/","url":"https://testing-library.com/docs/ecosystem-user-event/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://testing-library.com/docs/react-testing-library/cheatsheet/","url":"https://testing-library.com/docs/react-testing-library/cheatsheet/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"http://twitter.com/testing","url":"http://twitter.com/testing"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://nuancesprog.ru/p/11797/","url":"https://nuancesprog.ru/p/11797/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://nuancesprog.ru/p/15086/","url":"https://nuancesprog.ru/p/15086/"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://nuancesprog.ru/p/6229/","url":"https://nuancesprog.ru/p/6229/"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}