te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Jest Mock React Component ONLY in some tests - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Jest Mock React Component ONLY in some tests - Stack Overflow

    javascript - Jest Mock React Component ONLY in some tests - Stack Overflow

    programmeradmin3浏览0评论

    This question is really good: Jest Mock module per test

    It just don't answer my question on how to only mock it out in one single test and keep the rest using the original ponent.

    That would make sense if I wish to do some mocking for an snapshot but not for the other tests

    This is my current attempt

    import React from 'react'
import { render } from '@testing-library/react'

jest.mock('ponents/Photo', () =>
  jest.fn(() => jest.requireActual('ponents/Photo'))
)
import Photo from 'ponents/Photo'

import PhotoGrid from '.'

beforeEach(() => {
  Photo.mockReset()
})

test('default renders 9 photos if provided 9', () => {
  const photos = [...Array(9).keys()]
  const { getAllByTestId, debug } = render(<PhotoGrid photos={photos} />)

  debug()
  expect(getAllByTestId(PHOTO_COMP_TEST_ID)).toHaveLength(9)
})

test('renders with masonry grid style', () => {
  Photo.mockImplementation(() => <div />)
  const photos = [...Array(9).keys()]
  const { container, debug } = render(<PhotoGrid photos={photos} />)

  debug()

  expect(container).toMatchInlineSnapshot(`
    <div>
      ... 
    </div>
  `)
})

    This is the ponent to test

    import React from 'react'
import Masonry from 'react-masonry-css'
import './index.css'

import Photo from 'ponents/Photo'

function PhotoGrid({ photos, numberOfPhotos = 9 }) {
  const imgs = photos ? photos.slice(0, numberOfPhotos) : []

  const breakpointColumnsObj = {
    default: 4,
    1300: 3,
    900: 2,
    700: 1,
  }

  return (
    <Masonry
      breakpointCols={breakpointColumnsObj}
      className="my-masonry-grid"
      columnClassName="my-masonry-grid_column"
    >
      {imgs &&
        imgs.map(({ id, secret, server, farm }, index) => (
          <div key={index} className="masonry-item">
            <Photo id={id} secret={secret} server={server} farm={farm} />
          </div>
        ))}
    </Masonry>
  )
}

export default PhotoGrid

    This question is really good: Jest Mock module per test

    It just don't answer my question on how to only mock it out in one single test and keep the rest using the original ponent.

    That would make sense if I wish to do some mocking for an snapshot but not for the other tests

    This is my current attempt

    import React from 'react'
import { render } from '@testing-library/react'

jest.mock('ponents/Photo', () =>
  jest.fn(() => jest.requireActual('ponents/Photo'))
)
import Photo from 'ponents/Photo'

import PhotoGrid from '.'

beforeEach(() => {
  Photo.mockReset()
})

test('default renders 9 photos if provided 9', () => {
  const photos = [...Array(9).keys()]
  const { getAllByTestId, debug } = render(<PhotoGrid photos={photos} />)

  debug()
  expect(getAllByTestId(PHOTO_COMP_TEST_ID)).toHaveLength(9)
})

test('renders with masonry grid style', () => {
  Photo.mockImplementation(() => <div />)
  const photos = [...Array(9).keys()]
  const { container, debug } = render(<PhotoGrid photos={photos} />)

  debug()

  expect(container).toMatchInlineSnapshot(`
    <div>
      ... 
    </div>
  `)
})

    This is the ponent to test

    import React from 'react'
import Masonry from 'react-masonry-css'
import './index.css'

import Photo from 'ponents/Photo'

function PhotoGrid({ photos, numberOfPhotos = 9 }) {
  const imgs = photos ? photos.slice(0, numberOfPhotos) : []

  const breakpointColumnsObj = {
    default: 4,
    1300: 3,
    900: 2,
    700: 1,
  }

  return (
    <Masonry
      breakpointCols={breakpointColumnsObj}
      className="my-masonry-grid"
      columnClassName="my-masonry-grid_column"
    >
      {imgs &&
        imgs.map(({ id, secret, server, farm }, index) => (
          <div key={index} className="masonry-item">
            <Photo id={id} secret={secret} server={server} farm={farm} />
          </div>
        ))}
    </Masonry>
  )
}

export default PhotoGrid
    • javascript
    • reactjs
    • unit-testing
    • jestjs
    • react-testing-library
    Share Improve this question edited Aug 14, 2020 at 19:32 skyboyer 23.7k7 gold badges62 silver badges71 bronze badges asked Aug 14, 2020 at 9:34 NorfeldtNorfeldt 9,68824 gold badges109 silver badges172 bronze badges 1
    • is that working ? – La pach' Commented Nov 30, 2020 at 15:03
    Add a ment  | 

    2 Answers 2

    Reset to default 7

    I don't have the permission to add ments so I will just leave this here.

    I have tried the solution offered by Han Daniels and I was getting the error:

    TypeError: specificMockImpl.apply is not a function.

    I have fixed it by adding .default after jest.requireActual('ponents/Photo') because Photo is the default export.

    So it is: jest.requireActual('ponents/Photo').default

    jest.mock(...) the ponent you want to mock in one of tests.

    Use jest.requireActual(...) to implement default behavior.

    Use mockImplementation to implement custom behavior.

    import React from 'react'
import { render } from '@testing-library/react'

jest.mock('ponents/Photo')
import Photo from 'ponents/Photo'

import PhotoGrid from '.'

// This maintains the original implementation for tests. 
// This step is important because if not done, it will
// result in empty render errors.
beforeEach(() => {
  Photo.mockImplementation(jest.requireActual('ponents/Photo'));
}) 
 

// This test will use original implementation of 'ponents/Photo'
test('default renders 9 photos if provided 9', () => {
  const photos = [...Array(9).keys()]
  const { getAllByTestId, debug } = render(<PhotoGrid photos={photos} />)

  debug()
  expect(getAllByTestId(PHOTO_COMP_TEST_ID)).toHaveLength(9)
})

// This test will use the mocked implementation of 'ponents/Photo'
test('renders with masonry grid style', () => {
  Photo.mockImplementation(() => <div />)
  const photos = [...Array(9).keys()]
  const { container, debug } = render(<PhotoGrid photos={photos} />)

  debug()

  expect(container).toMatchInlineSnapshot(`
    <div>
      ... 
    </div>
  `)
})

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论