Ручной макет модуля, используемый компонентами - PullRequest
Новая
       105

Ручной макет модуля, используемый компонентами

0 голосов
/ 19 июня 2020

У меня есть несколько компонентов, которые используют один крючок useParams. Документы-шутки предлагают использовать jest.mock для репликации этого хука. Как вы понимаете, написание этого макета над пространством нескольких файлов может раздражать, и поэтому я стараюсь использовать ручные макеты. В документации Jest предлагается создать каталог __mocks__ рядом с файлом, который я буду издеваться - в данном случае это react-router-dom.js в node_modules. Я следовал указаниям документации, но мои тесты все еще терпят неудачу, потому что они не могут найти нигде определенное useParams. Пример:

src / components / compOne. js: 

import React from 'react'
import styled from 'styled-components'
import { useParams } from 'react-router-dom'

const Wrapper = styled.div``

export default function CompOne() {
    const { id = '123' } = useParams()
    return (
        <Wrapper>
            <h2>{`ID: ${id}`}</h2>
        </Wrapper>
    )
}

src / __ tests __ / compOne. js: 

import React from 'react'
import CompOne from '../components/compOne.js'
import { shallow } from 'enzyme'

jest.mock('react-router-dom')

test('renders without crashing', () => {
    shallow(<CompOne />)
})

root / __ mocks __ / response-router-dom. js: 

jest.mock('react-router-dom', () => {
    useParams: () => ({
        id: 'MOCKED_VALUE',
    })
})

Вот как тесты терпят неудачу: 

src/__tests__/compOne.js
  ● renders without crashing

    TypeError: (0 , _reactRouterDom.useParams) is not a function

       6 |
       7 | export default function CompOne() {
    >  8 |     const { id } = useParams()
         |                            ^
       9 |     return (
      10 |         <Wrapper>
      11 |             <h2>{`ID: ${id}`}</h2>

      at CompOne (src/components/navigator/pages/compOne.js:8:28)
      at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:829:32)
      at fn (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:645:55)
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/src/Utils.js:99:18)
      at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:645:20)
      at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:411:22)
      at shallow (node_modules/enzyme/src/shallow.js:10:10)
      at Object.<anonymous> (src/__tests__/compOne.js:8:5)

Если вам интересно узнать о структуре проекта, обратитесь к типичной структуре create-react-app - где myapp/ означает root/

Any помощь будет очень признательна. Заранее спасибо!

1 Ответ

1 голос
/ 19 июня 2020

Настройки ваших файлов в порядке. В вашем макете react-router-dom вы захотите экспортировать объект , который содержит то, что вы хотите, чтобы макет имел, вместо вызова jest.mock.

Это то, что вам нужно сделать в вашем /__mocks__/react-router-dom.js: 

module.exports = {
  useParams: () => ({
    id: 'MOCKED_VALUE',
  })
}

Поскольку вы не имитируете основной модуль Node, вам вообще не нужно вызывать jest.mock. Вы можете удалить jest.mock('react-router-dom') из тестового файла.

...