Модульный тест React для контекста и редуктора - PullRequest
Новая
       75

Модульный тест React для контекста и редуктора

0 голосов
/ 05 августа 2020

Я создал LauoutContext.js для нужд моего приложения. Также используется router location для получения URL / пути. И передача редуктора дочернему.

JS Файл: LayoutContext. js

import React, { createContext, useReducer } from 'react'
import PropTypes from 'prop-types'
import Dashboard from '../components/layouts/primary/Dashboard'
import layoutReducer from '../reducers/layoutReducer'
import { useLocation } from 'react-router-dom'

export const LayoutContext = createContext()
const LayoutContextProvider = (props) => {
  const [leftDrawerSelectedItem, layoutDispatch] = useReducer(
  layoutReducer,
  useLocation().pathname
)
return (
  <LayoutContext.Provider value={{ leftDrawerSelectedItem, layoutDispatch }}>
    <Dashboard>{props.children}</Dashboard>
  </LayoutContext.Provider>
  )
}

LayoutContextProvider.propTypes = {
  children: PropTypes.object
}

export default LayoutContextProvider

Тестовый файл: LayoutContext .test. js

import React, { createContext, useReducer } from 'react'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'

import LayoutContext from '../LayoutContext'
import Dashboard from '../Dashboard'
import LayoutContextProvider from '../LayoutContext'

test('LayoutContext test', () => {
  const tree = (
    <LayoutContext.Provider value={null}>
      <Dashboard />
    </LayoutContext.Provider>
 )

 const { getByText } = render(tree)

 expect(getByText('Something')).toBeInTheDocument()
 })

Ошибка:

Предупреждение: React.createElement: тип недействителен - ожидается строка (для встроенных в компонентах) или класс / функция (для составных компонентов), но получил: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Как я могу проверить этот контекст?

Здесь Dashboard. js файл: 

const Dashboard = (props) => {
  const { children } = props
  const classes = useStyles()
  let location = useLocation()


 return (
    <div className={classes.root}>
      <main className={classes.main}>{children}</main>
    </div>
  )
 }

Dashboard.propTypes = {
 children: PropTypes.node
}
export default Dashboard

1 Ответ

0 голосов
/ 06 августа 2020

здесь, как смоделировать useHistory из react-router-dom: 

jest.mock("react-router-dom", () => ({
  ...jest.requireActual("react-router-dom"),
  useLocation: () => ({
    pathname: "/",
  }),
}))

или вам нужно обернуть свой компонент BrowserRouter: 

<LayoutContext.Provider value={null}>
 <BrowserRouter>
    <Dashboard />
 </BrowserRouter>
</LayoutContext.Provider>
...