如何在 React 测试库中设置 InitialState

Question

I am writing a test where I need to render a component, but the rendering of my component is not working and I am receiving this error:

Uncaught [TypeError: Cannot read property 'role' of undefined].

This is because in the componentDidMount function in my component I am checking if this.props.authentication.user.role === 'EXPERT' . However, this.props.authentication has user as undefined .

This is the correct initialState for my program, but for the test I want to set my initialState to have a user object. That is why I redefine initialState in my test. However, the component does not render with that new initialState .

Here is the testing file:

import { Component }  from '../Component.js';
import React from 'react';
import { MemoryRouter, Router } from 'react-router-dom';
import { render, cleanup, waitFor } from '../../test-utils.js';
import '@testing-library/jest-dom/extend-expect';

afterEach(cleanup)

describe('Component Testing', () => {
  test('Loading text appears', async () => { 
    const { getByTestId } = render(
      <MemoryRouter><Component /></MemoryRouter>,
      {
        initialState: {
          authentication: {
            user: { role: "MEMBER", memberID:'1234' }
          }
        }
      },
    );       
    let label = getByTestId('loading-text')
    expect(label).toBeTruthy()
  })
});

Here is the Component file:

class Component extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tasks: [],
      loading: true,
    }

    this.loadTasks = this.loadTasks.bind(this)
  }

  componentDidMount() {
    if (
      this.props.authentication.user.role == 'EXPERT' ||
      this.props.authentication.user.role == 'ADMIN'
    ) {
       this.loadTasks(this.props.location.state.member)
    } else {
       this.loadTasks(this.props.authentication.user.memberID)
    }
  }

  mapState(state) {
    const { tasks } = state.tasks
    return {
      tasks: state.tasks,
      authentication: state.authentication
    }
  }
}

I am also using a custom render function that is below

import React from 'react' 
import { render as rtlRender } from '@testing-library/react' 
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { initialState as reducerInitialState, reducer } from './_reducers'
import rootReducer from './_reducers'
import configureStore from './ConfigureStore.js';
import { createMemoryHistory } from 'history'

function render(ui, {
    initialState = reducerInitialState,
    store = configureStore({}),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

// re-export everything
export * from '@testing-library/react'

// override render method
export { render }

Answer 1

Perhaps I am coming super late to the party but maybe this can serve to someone. What I have done for a Typescript setup is the following (all this is within test-utils.tsx )

const AllProviders = ({
  children,
  initialState,
}: {
  children: React.ReactNode
  initialState?: RootState
}) => {
  return (
    <ThemeProvider>
      <Provider store={generateStoreWithInitialState(initialState || {})}>
        <FlagsProvider value={flags}>
          <Router>
            <Route
              render={({ location }) => {
                return (
                  <HeaderContextProvider>
                    {React.cloneElement(children as React.ReactElement, {
                      location,
                    })}
                  </HeaderContextProvider>
                )
              }}
            />
          </Router>
        </FlagsProvider>
      </Provider>
    </ThemeProvider>
  )
}

interface CustomRenderProps extends RenderOptions {
  initialState?: RootState
}

const customRender = (
  ui: React.ReactElement,
  customRenderProps: CustomRenderProps = {}
) => {
  const { initialState, ...renderProps } = customRenderProps

  return render(ui, {
    wrapper: (props) => (
      <AllProviders initialState={initialState}>{props.children}</AllProviders>
    ),
    ...renderProps,
  })
}
export * from '@testing-library/react'

export { customRender as render }

Worth to mention that you can/should remove the providers that doesn't make any sense for your case (like probably the FlagsProvider or the HeaderContextProvider ) but I leave to illustrate I decided to keep UI providers within the route and the others outside (but this is me making not much sense anyway)

In terms of the store file I did this:

//...omitting extra stuff

const storeConfig = {
   // All your store setup some TS infer types may be a extra challenge to solve
}

export const store = configureStore(storeConfig)

export const generateStoreWithInitialState = (initialState: Partial<RootState>) =>
  configureStore({ ...storeConfig, preloadedState: initialState })

//...omitting extra stuff

Cheers!

Answer 2

I am not sure what you are doing in the configure store, but I suppose the initial state of your component should be passed in the store.

import React from 'react' 
 import { render as rtlRender } from '@testing-library/react' 
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import { initialState as reducerInitialState, reducer } from './_reducers'
 import { createMemoryHistory } from 'history'
    
function render(
  ui,
  {
    initialState = reducerInitialState,
    store = createStore(reducer,initialState),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

// re-export everything
export * from '@testing-library/react'

// override render method
export { render }

I hope it will help you:)