I'm having an issue with Cypress11. When check window.store it returns undefined.
I'm looking to dispatch data allowing me to render the page in a specific configuration (which is dependent on the store data) and run some tests against it. Unfortunately I'm failing at the first hurdle. If the store is undefined then I can't dispatch to it. If someone could check my index page set up and let me know how stupid I'm being I'd really appreciate it.
Here's my set up.
index.tsx
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import App from './components/Container/App';
import { PublicClientApplication } from '#azure/msal-browser';
import { MsalProvider } from '#azure/msal-react';
import { msalConfig } from './authConfig';
import { store } from './app/store';
import { Provider } from 'react-redux';
const msalInstance = new PublicClientApplication(msalConfig);
const root = ReactDOM.createRoot(document.getElementById('root') || new DocumentFragment());
root.render(
<React.StrictMode>
<BrowserRouter>
<MsalProvider instance={msalInstance}>
<Provider store={store}>
<App />
</Provider>
</MsalProvider>
</BrowserRouter>
</React.StrictMode>
);
type CypressWindow = Window & typeof globalThis & { Cypress: any; store: any };
const testWindow = window as CypressWindow;
if (testWindow.Cypress) {
testWindow.store = store;
}
window.Cypress exists
Related
I am trying to test my component with jest and react testing library but jest seems to think ReactDOM.render is not a DOM element. Running the test gives this error
Below is my code and the things I tried to do:
index.tsx file:
import React from 'react';
import ReactDOM from 'react-dom';
import { applyMiddleware, compose, createStore } from 'redux';
import {Provider} from 'react-redux';
import './index.css';
import thunk from 'redux-thunk';
import combinedReducer from './main/reducers/combinedReducer';
import { MyProvider } from './CustomProviders';
import reportWebVitals from './reportWebVitals';
import { App } from './main/components/App';
const devTool = process.env.NODE_ENV === 'development' && (window as any).__REDUX_DEVTOOLS_EXTENSION__ ? (window as any).__REDUX_DEVTOOLS_EXTENSION__() : (f) => f;
export const store = createStore(combinedReducer, compose(applyMiddleware(thunk), devTool));
if (process.env.NODE_ENV === 'development') {
require('css-framework.css');
}
ReactDOM.render(
<React.StrictMode>
<MyProvider>
<Provider store={store}>
<App/>
</Provider>
</MyProvider>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.tsx file:
import { useDispatch } from 'react-redux';
import {getFeatures, setContextInStoreActn, setUser, setProduct} from '../actions/GeneralActions';
import { useContext, useEffect } from 'react';
import { MyContext } from '../MyContext';
import { BasePage } from './BasePage';
export const App = () => {
const dispatch = useDispatch();
const context = useContext(MyContext);
useEffect(() => {
dispatch(setContextInStoreActn(context));
void context.getSelectedProduct().then((selectedProduct) => dispatch(setProduct(selectedProduct)));
void context.getImpersonatingUser().then((impersonatingUser) => dispatch(setUser(impersonatingUser)));
dispatch(getFeatures());
}, []);
return (
<div>
<BasePage />
</div>
);
};
App.test.tsx file:
import { Provider } from 'react-redux';
import { render } from '#testing-library/react';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { App } from '../../main/components/App';
const middlewares = [thunk];
const general = {
general: ''
};
const store = configureMockStore(middlewares)({
general
});
const mockWait = () => new Promise((resolve) => setTimeout(resolve, 550));
test('renders without crashing', () => {
render(
<Provider store={store}>
<App/>
</Provider>
);
expect(render).toHaveBeenCalledWith(<Provider store={store}> <App/> </Provider>); //this never gets executed in the test
});
I looked at a couple solutions that suggest appending a div or root element to my test render but that did not seem to do anything.
Another thing I tried to do was upgrading everything to the latest versions (latest react, react-dom, jest, RTL, etc...) and test with that but there were too many dependency issues so I abandoned that route.
Edit:
After playing around with my App.tsx file I found out that the reason it fails is because of the useEffect, removing it makes the test pass but that is not ideal.
I have a function like following, this is a rudux to provide EstateList.
import {render} from "react-dom";
import React from "react";
import {Provider} from "react-redux";
import store from "./Store";
import EstateList from "../estates/estateList/estateList";
function estateList() {
render(
<Provider store={store}>
<EstateList />
</Provider>,
window.document.getElementById('estateList')
);
}
And EstateList is like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {connect} from "react-redux";
class EstateList extends Component {
constructor(){
...
console.log('this can not be seen');
}
render() {...}
}
const mapStateToProps = (state) => {
return {
title: state.subNavReducer.title
};
};
const mapDispatchToProps = (dispatch) => {
return {
setSubNav: (title) => {
dispatch({
type: "SET_TITLE",
payload: title
});
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(EstateList);
I tried to test EstateList, like following:
import {shallow, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import {expect} from 'chai';
import {Provider} from "react-redux";
import store from "../../../components/store/Store";
import EstateList from "../../../components/estates/estateList/estateList";
//import {EstateList} from "../../../components/estates/estateList/estateList";
describe('estate', function () {
it('getArticlesFromDatabase ', function () {
let app = shallow(
<Provider store={store}>
<EstateList />
</Provider>
);
});
});
But it shows this warning message:
console.error node_modules/fbjs/lib/warning.js:33
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in.
How to fix it?
I had changed
import {EstateList} from "../../../components/estates/estateList/estateList";
to
import EstateList from "../../../components/estates/estateList/estateList";
Then the warning message gone.
But seems like class estateList still not be runed.
Cause when I run the test, I haven't seen the console.log which I add inside estateList's constructor.
By the way, If I changed
it('getArticlesFromDatabase ', function () {
let app = shallow(
<Provider store={store}>
<EstateList />
</Provider>
);
});
to
it('getArticlesFromDatabase ', function () {
let app = shallow(
<Provider store={store}>
<EstateList />
</Provider>
).dive();
});
then I will get following error message:
Invariant Violation: Could not find "store" in either the context or
props of "Connect(EstateList)". Either wrap the root component in a
, or explicitly pass "store" as a prop to
"Connect(EstateList)".
you shouldn't have to write a test for provider, the libary authors have already done that for you.
You are importing your EstateList component wrong, you export default'd it, and then are doing a object destructure import for named imports.
just import EstateList from 'path'
I'm learning developing react.js server-side rendering web app, I'm using Express.js and Swig for the server-side
Code
server.js
import express from 'express'
import path from 'path'
import React from 'react'
import { StaticRouter } from 'react-router'
import { renderToString } from 'react-dom/server'
import { Provider } from 'react-redux'
import setupSwig from 'setup.swig'
import { setupStore } from '../shared/redux/store'
import { ajaxFunction } from '../shared/services/Customer'
import App from '../shared/components/App'
const app = express()
app.use(express.static(path.resolve(__dirname, '..', '_public')))
setupSwig(app)
app.use((req, res) => {
const url = req.url
ajaxFunction()
.then(({ data: customers }) => {
const context = {}
const store = setupStore({
customers
})
const html = renderToString(
<Provider store={ store }>
<StaticRouter location={ url } context={ context }>
<App />
</StaticRouter>
</Provider>
)
const initState = store.getState()
res.render('./index.swig', { html, initState })
})
}
})
app.listen(3000)
client.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { setupStore } from '../shared/redux/store'
import App from '../shared/components/App'
const initState = window.__INIT_STATE__
delete window.__INIT_STATE__
const store = setupStore(initState)
render(<Provider store={ store }>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>, document.getElementById('reactApp'))
Question
On the server.js I use <StaticRouter location={ url } context={ context }> but I have no ideas how to make ((what props to pass with) the <BrowserRouter> on client.js redirect to specific URL e.g. /customers, /about
If I did things wrong way please also guide
Thanks
I've the following app:
Client
index.js
import React from "react";
import ReactDOM from "react-dom";
import Root from "./containers/Root";
import configureStore from "./store/configureStore";
import { browserHistory } from "react-router";
import { loginUserSuccess } from "./actions/auth";
import { syncHistoryWithStore } from "react-router-redux";
const target = document.getElementById("root");
const store = configureStore(browserHistory, window.__INITIAL_STATE__);
// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store)
const node = (
<Root store={store} history={history} />
);
let token = localStorage.getItem("token");
if (token !== null) {
store.dispatch(loginUserSuccess(token));
}
ReactDOM.render(node, target);
Root.js
import React from "react";
import {Provider} from "react-redux";
import AppRouter from "../routes/appRouter";
export default class Root extends React.Component {
static propTypes = {
store: React.PropTypes.object.isRequired,
history: React.PropTypes.object.isRequired
};
render () {
return (
<Provider store={this.props.store}>
<AppRouter history={this.props.history}>
</AppRouter>
</Provider>
);
}
}
AppRouter (routes/appRouter.js
import React from "react";
import routes from "./routes";
import { Router } from "react-router";
export default (
<Router routes={routes} history={this.props.history}></Router>
)
routes (routes/routes.js)
import React from "react";
import {Route, IndexRoute} from "react-router";
import { App } from "../containers";
import {HomeView, LoginView, ProtectedView, NotFoundView} from "../views";
import {requireAuthentication} from "../components/core/AuthenticatedComponent";
export default (
<Route path='/' component={App} name="app" >
<IndexRoute component={requireAuthentication(HomeView)}/>
<Route path="login" component={LoginView}/>
<Route path="protected" component={requireAuthentication(ProtectedView)}/>
<Route path="*" component={NotFoundView} />
</Route>
)
requireAuthentication (/component/core/AuthenticatedComponent.js)
import React from "react";
import {connect} from "react-redux";
import { push } from "react-router-redux";
export function requireAuthentication(Component) {
class AuthenticatedComponent extends React.Component {
componentWillMount () {
this.checkAuth(this.props.isAuthenticated);
}
componentWillReceiveProps (nextProps) {
this.checkAuth(nextProps.isAuthenticated);
}
checkAuth (isAuthenticated) {
if (!isAuthenticated) {
let redirectAfterLogin = this.props.location.pathname;
this.props
.dispatch(push(`/login?next=${redirectAfterLogin}`));
}
}
render () {
return (
<div>
{this.props.isAuthenticated === true
? <Component {...this.props}/>
: null
}
</div>
)
}
}
const mapStateToProps = (state) => ({
token: state.auth.token,
userName: state.auth.userName,
isAuthenticated: state.auth.isAuthenticated
});
return connect(mapStateToProps)(AuthenticatedComponent);
}
configureStore.js
import rootReducer from "../reducers";
import thunkMiddleware from "redux-thunk";
import {createStore, applyMiddleware, compose} from "redux";
import {routerMiddleware} from "react-router-redux";
import {persistState} from "redux-devtools";
import createLogger from "redux-logger";
import DevTools from "../dev/DevTools";
const loggerMiddleware = createLogger();
const enhancer = (history) =>
compose(
// Middleware you want to use in development:
applyMiddleware(thunkMiddleware, loggerMiddleware, routerMiddleware(history)),
// Required! Enable Redux DevTools with the monitors you chose
DevTools.instrument(),
persistState(getDebugSessionKey())
);
function getDebugSessionKey() {
if(typeof window == "object") {
// You can write custom logic here!
// By default we try to read the key from ?debug_session=<key> in the address bar
const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\b/);
return (matches && matches.length > 0)? matches[1] : null;
}
return;
}
export default function configureStore(history, initialState) {
// Add the reducer to your store on the `routing` key
const store = createStore(rootReducer, initialState, enhancer(history))
if (module.hot) {
module
.hot
.accept("../reducers", () => {
const nextRootReducer = require("../reducers/index");
store.replaceReducer(nextRootReducer);
});
}
return store;
}
Server
server.js
import path from "path";
import { Server } from "http";
import Express from "express";
import React from "react";
import {Provider} from "react-redux";
import { renderToString } from "react-dom/server";
import { match, RouterContext } from "react-router";
import routes from "./src/routes/routes";
import NotFoundView from "./src/views/NotFoundView";
import configureStore from "./src/store/configureStore";
import { browserHistory } from "react-router";
// import { syncHistoryWithStore } from "react-router-redux";
// initialize the server and configure support for ejs templates
const app = new Express();
const server = new Server(app);
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "./"));
// define the folder that will be used for static assets
app.use("/build", Express.static(path.join(__dirname, "build")));
// // universal routing and rendering
app.get("*", (req, res) => {
const store = configureStore(browserHistory);
match(
{ routes, location: req.url },
(err, redirectLocation, renderProps) => {
// in case of error display the error message
if (err) {
return res.status(500).send(err.message);
}
// in case of redirect propagate the redirect to the browser
if (redirectLocation) {
return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
}
// generate the React markup for the current route
let markup;
if (renderProps) {
// if the current route matched we have renderProps
// markup = renderToString(<Provider store={preloadedState} {...renderProps}/>);
markup = renderToString(
<Provider store={store} >
<RouterContext {...renderProps} />
</Provider>
);
} else {
// otherwise we can render a 404 page
markup = renderToString(<NotFoundView />);
res.status(404);
}
// render the index template with the embedded React markup
const preloadedState = store.getState()
return res.render("index", { markup, preloadedState });
}
);
});
// start the server
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || "production";
server.listen(port, err => {
if (err) {
return console.error(err);
}
console.info(`Server running on http://localhost:${port} [${env}]`);
});
I don't know if I'm initializing correctly my store on the server-side.
How do I know this? Because renderProps is always null and thereby it returns NotFoundView.
However I made some modifications since I understood that my routes were being initialized incorrectly.
This made me use my configureStore(...) (which I use on client-side and it's working) on the server-side.
Now I'm getting the following error:
TypeError:Cannot read property 'push' of undefined
This error happens on AuthenticatedComponent in the following line:
this.props
.dispatch(push(`/login?next=${redirectAfterLogin}`));
It's strange since this works on client-side and on server-side it just throws this error.
Any idea?
PS
Am I doing it correctly by using the same Routes.js in client and server?
And the same for my configureStore(...)?
All the examples I see, they use a different approach to create the server-side store, with createStore from redux and not their store configuration from client-side.
PS2
I now understand that push may not work on server, only client (right?). Is there any workaround for this?
PS3
The problem I was facing was happening because I was rendering <Router /> into server, and my routes.js should only contain <Route /> nodes.
However, after a while I discovered that history shouldn't be configured in server and I just configured my store and passed it to the <Provider /> being rendered.
But now I need to compile my JSX and it throws:
Error: Module parse failed: D:\VS\Projects\Tests\OldDonkey\OldDonkey.UI\server.js Unexpected token (46:20)
You may need an appropriate loader to handle this file type.
| // markup = renderToString(<Provider store={preloadedState} {...renderProps}/>);
| markup = renderToString(
| <Provider store={store} >
| <RouterContext {...renderProps} />
| </Provider>
Just starting to add React Routes to a React/firebase app. I had this code to read the data,
const fb = firebase
.initializeApp(config)
.database()
.ref();
fb.on('value', snapshot => {
const store = snapshot.val();
ReactDOM.render(
<App {...store} />
,
document.getElementById('root')
);
});
This worked correctly, with real time updates to the App.
I then started to play with Router,
ReactDOM.render(
<Router>
<Route path="/" component={App {...store}} />
</Router>
,
document.getElementById('root')
);
But the {...store} gives an error, unexpected token. Should I move the Firebase code lower down the tree into the App component or is there a different way?
uh the component=doesn't take that thing that you have there with ReactDOM.render()
As you have it right now: store will be undefined... so set:
let store = {} // at the top
Where is your actual component/class defined?
also you shouldn't creator render based on when Firebase shows up you should render first then when firebase shows up you can update the state.
So there is a lot that will need to be fixed here before this can work.
Here is my index.js:
also notice that store is the result of the configureStore (I'm assuming you want to use Redux as you have a store)...
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './root/containers/Root'
import './index.css'
import configureStore from './root/store'
import { syncHistoryWithStore } from 'react-router-redux'
import { browserHistory } from 'react-router'
const store = configureStore()
const history = syncHistoryWithStore(browserHistory, store)
render(
<Root store={store} history={history} />,
document.getElementById('root')
);
My store:
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import reducer from '../reducers'
import { database, initializeApp } from 'firebase'
import { firebaseConfig } from '../constants'
initializeApp(firebaseConfig)
export const rootRef = database().ref().child('/react')
export const dateRef = rootRef.child('/date')
export default function configureStore(preloadedState){
const store = createStore(
reducer,
preloadedState,
applyMiddleware(thunkMiddleware, createLogger())
)
return store
}
And my Root:
import React, { Component, PropTypes } from 'react'
import { Provider } from 'react-redux'
import routes from './routes'
import { Router, } from 'react-router'
class Root extends Component {
render() {
const { store, history } = this.props
return (
<Provider store={store}>
<Router history={history} routes={routes} />
</Provider>
)
}
}
Root.propTypes = {
store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
Simplest Version to get started:
import React, { Component } from 'react'
import { firebaseConfig } from '../constants' //this is a must otherwise you have multiple versions of firebase running around...
initializeApp(firebaseConfig)
export const rootRef = database().ref().child('/root')
class App extends Component {
componentDidMount(){
initializeApp(firebaseConfig)
this.state = {store: {}}
rootRef.on('value', snapshot => {
this.setState({store: snapshot.val()});
}
}
render(){
let { store } = this.state
let childrenWithProps = React.Children
.map(this.props.children, function(child) {
return React.cloneElement(child, { store: store });
});
return <div>
{JSON.stringify(store)}
{childrenWithProps}
</div>
}
}
const Routes = (<Route component={App}><Route component={Comp1} path='/earg'/><Route component={Comp2} path='/earg'/></Route>)
render(Routes, document.getElementById('root'))
This is a lot of code and you'll need still more to get this going... I'd recommend a tutorial perhaps...
In the end, for a quick solution, I used an anonymous function to wrap the component,
<Route path="/" component={() => (<App {...store} />)} />