Saya memiliki komponen Dasbor berbasis kelas

class Dashboard extends Component {
 ...
 render() {
   return sth
 }
}

const mapStateToProps = state => ({
  userId: state.mainState.userId,
  theme: state.mainState.theme,
  companyUsers: state.mainState.companyUsers,
  activities: state.mainState.activities,
  activityTypes: state.mainState.activityTypes,
  projects: state.mainState.projects
});

const mapDispatchToProps = {
  setMainValue: actions.setMainValue
};

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Dashboard));

Sekarang saya mencoba untuk mulai menguji komponen menggunakan jest dan react-testing-library. Saya telah membuat fungsi renderWithProvider yang mirip dengan artikel ini dan mencoba menguji menggunakan render khusus fungsi. Satu-satunya perbedaan adalah bahwa di situs web redux resmi ia mengembalikan seluruh status di mapStateToProps karena pendek sementara saya hanya mengembalikan variabel tertentu.

function renderWithProvider(ui, { initialState, ...renderOptions } = {}) {
 const store = createStore(rootReducer, initialState, applyMiddleware(thunk));

  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>;
  }

  Wrapper.propTypes = {
    children: PropTypes.node.isRequired
  };

  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
}

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

// override render method
export { renderWithProvider };

Ketika saya merender komponen dan menjalankan tes

import Dashboard from '.';

import { renderWithProvider } from '../testUtils/renderWithProvider'

test('should ', () => {
  renderWithProvider(<Dashboard />, {
    initialState: {
      userId: 106,
      theme: 'light',
      companyUsers: [],
      activities: [],
      activityTypes: [],
      projects: []
    }
  });
});

Saya mendapat:

TypeError: Tidak dapat membaca properti 'userId' dari undefined

  334 |
  335 | const mapStateToProps = state => ({
  336 |   userId: state.mainState.userId,

Setiap saran dipersilahkan

Edit: Saya juga telah mencoba yang berikut ini:

test('should ', () => {
  renderWithProvider(<Dashboard />, {
    initialState: {
      mainState: {
        userId: 106,
        theme: 'light',
        companyUsers: [],
        activities: [],
        activityTypes: [],
        projects: []
      }
    }
  });
});

Tetapi tetap mendapatkan kesalahan yang sama

0
kboul 7 April 2021, 13:40

2 jawaban

Jawaban Terbaik

Setelah menggali banyak saya menemukan bahwa masalah akhirnya terkait dengan penggunaan history perpustakaan dan penggunaan rootReducer(history) di toko proyek.

const store = createStore(
  rootReducer(history),
  composeEnhancers(applyMiddleware(routerMiddleware(history), thunk))
);

Setelah saya melewati rootReducer sebagai fungsi dan sejarah sebagai argumen di rootReducer mirip dengan menyimpan inisialisasi store.getState() di dalam renderWithProvider tidak lagi undedined, oleh karena itu mainState juga dan nilainya:

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

function renderWithProvider(ui, { initialState, ...renderOptions } = {}) {
 const store = createStore(rootReducer(history), initialState, 
 applyMiddleware(thunk));
...
}
1
kboul 7 April 2021, 13:11

Nilai awal Anda salah berdasarkan struktur yang diharapkan di mapStateToProps Anda. Properti yang Anda lewati ini harus menjadi sub-properti dari properti mainState daripada properti tingkat atas dari status root.

2
Linda Paiste 7 April 2021, 11:15