组件使用的手动模拟模块答案

【问题标题】：Manual Mock Module Used By Components组件使用的手动模拟模块
【发布时间】：2020-10-10 01:21:10
【问题描述】：

我有几个组件使用单个钩子useParams。开玩笑的文档建议使用jest.mock 来复制这个钩子。正如你可以想象的那样，在几个文件的空间上编写这个模拟可能会很烦人，因此我正在寻求使用手动模拟。开玩笑的文档建议我在要模拟的文件旁边创建一个__mocks__ 目录——在这种情况下，该文件是node_modules 中的react-router-dom.js。我遵循了文档的指示，但我的测试仍然失败，因为他们无法在任何地方找到定义的 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__/react-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/

任何帮助将不胜感激。提前谢谢！

【问题讨论】：

标签： reactjs unit-testing testing mocking jestjs

【解决方案1】：

您的文件设置良好。在react-router-dom 的模拟中，您需要导出一个对象，其中包含您希望模拟具有的内容，而不是调用jest.mock。

这是您需要在/__mocks__/react-router-dom.js 中执行的操作：

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

因为你不是在模拟 Node 的核心模块，所以你根本不需要调用 jest.mock。您可以从测试文件中删除 jest.mock('react-router-dom')。

【讨论】：