Soy nuevo en escribir casos de prueba usando la biblioteca React Test.
Aquí está mi componente
import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; class MyContainer extends React.Component { static propTypes = { graphicalData: PropTypes.object.isRequired, }; render() { const { graphicalData } = this.props; return ( graphicalData && ( <div> /////some action and rendering </div> ))} } const mapStateToProps = (state) => { return { graphicalData: state.design.contents ? state.design.contents.graphicalData : {}, }; }; const mapDispatchToProps = (dispatch) => ({}); export default connect(mapStateToProps, mapDispatchToProps)(MyContainer)));Así que estoy escribiendo mi archivo de caso de prueba usando la biblioteca React Testing
import React from 'react'; import '@testing-library/jest-dom'; import { render, cleanup, shallow } from '@testing-library/react'; import MyContainer from '../../MyContainer'; import configureMockStore from 'redux-mock-store'; import ReactDOM from 'react-dom'; const mockStore = configureMockStore(); import { Provider } from 'react-redux'; const store = mockStore({ state: { design: { contents: { graphicalModel: { cars: [{},{}], bikes: [{},{}] }, }, }, }, }); afterEach(cleanup); it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render( <Provider store={store}> <MyContainer /> </Provider>, div ); ReactDOM.unmountComponentAtNode(div); });No estoy seguro de qué salió mal, mi idea es verificar si el componente se carga sin fallar, también si la longitud de la matriz de automóviles es mayor que 0, verifique algo representado en la página.
Pero recibo un error, cualquier ayuda con un ejemplo o sugerencia me salvará el día.
El error parece correcto. Verifique la estructura que ha pasado a la función mockStore() . Está
state: { design: { contents: { graphicalModel: { cars: [{},{}], bikes: [{},{}] }, }, }, },Entonces, cuando acceda a su MyContainer, debe acceder a él como
state.state.design.contentsEs solo que tiene una jerarquía adicional en el objeto de estado.
O, si no desea cambiar el componente, cambie la estructura del estado pasado a su método mockStore() como:
const store = mockStore({ design: { contents: { graphicalModel: { cars: [{},{}], bikes: [{},{}] }, }, }, });