Как имитировать неимпортированный компонент React, содержащийся в файле с экспортированным компонентом по умолчанию? - PullRequest
Новая
       152

Как имитировать неимпортированный компонент React, содержащийся в файле с экспортированным компонентом по умолчанию?

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

С тех пор, как я узнал о функциональных компонентах в React, мне нравится разбивать функции внутри компонента на более мелкие компоненты, насколько это возможно. Но это представляет проблему во время модульного тестирования с помощью Jest.

Это простая версия того, что я sh тестирую: 

//Big.js
export default function Big({ param }){
   return(
      <div>
         <Small name={param}/>
      </div>
   );
}

//I don't usually export smaller components because they will only be used in this file, but I have to for testing purposes
export const Small = ({ name }) => {
    return <span>Hello {name}</span>
}

Сейчас я тестирую Big.js и я хочу высмеять Small и, возможно, протестировать его позже отдельно. Возможно ли это?

Я пробовал это: 

//Big.test.js (contained in a folder which is in the same directory as Big.js

import Big from '../Big'

jest.mock('../Big', () => {
   const actual = jest.requireActual('../Big')
   return {
      ...actual,
      Small: ({ name }) => <span>{name}</span>
   }
})

...

it('test', async() => {
   act(() => { <Big param="John"/> });
})

Это вызывает ошибку: 

Error type is invalid: expected a string (for built-in components) or a class/function (for components) but got: object.

Итак, мой вопрос: как мне высмеять Small компонент, если возможно?

...