I am trying to practice using Redux/testing React, and have a simple app set up with the Facebook Create-React Kit.
I have a basic test that is just supposed to make sure an element renders:
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render( < Companies / > , div);
});
It was passing until I implemented Redux in that element, like so:
function select(state) {
return {companies: state};
}
export default connect(select)(Companies);
Now, despite the element certainly rendering in the browser, and the redux implementation working just fine, I am getting this message in the test results:
Invariant Violation: Could not find "store" in either the context or props of "Connect(Companies)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Companies)".
I thought I had done this in my routes with this:
let store = createStore(companyApp);
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="/companies" component={Companies}>
<Route path=":id" component={Company}/>
</Route>
< /Route>
</Router>
</Provider>, document.getElementById('root'));
but I must be missing something.
This happens because the Companies component is a connected component.
When you try to render the connected component in the test, it warns you that there is no store present. To solve this you can either wrap the Companies component in a Provider with a store specifically made for the test, or, if you just want to test the rendering of the component without worrying about the redux store you can explicitly export the raw component like so:
export class Companies {
...
}
export default connect(select)(Companies);
and in your test
import { Companies } from ./Companies
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render( < Companies companies={[]} / > , div);
});
Testing connected components is described in more detail here http://redux.js.org/docs/recipes/WritingTests.html#connected-components
Related
I want to have a React component that only has functions in it. These functions should only run once and will run throughout the entirety of the app (these are bluetooth connection functions).
Usually I would create a class for this, but I need to access my Redux store (which can only happen in a component). The component would simply render <></>.
Is there a better way to do this?
You could create a custom hook and use it in your App component. Since you can run other hooks inside, you can access the store with the useStore hook and run code only once with the useEffect hook with an empty array in its dependencies.
function useBluetoothConnections() {
const store = useStore();
useEffect(() => {
// do things once
}, []);
}
function App() {
useBluetoothConnections();
return (<>
Your app here
</>)
}
const rootElement = document.getElementById('root')
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
)
We are currently adding Sentry.io to our React app and wrapping our root App component with the Sentry.withErrorBoundary() HOC and displaying a fallback ErrorPage. However, I think this only displays for errors that occur within the React Component Tree, and I'm wondering how to display the fallback ErrorPage for Global errors that occur outside the ErrorBoundary. See below for example:
// index.tsx
const AppRoot = withSentryErrorBoundary(App, {
fallback: getErrorPage,
});
ReactDOM.render(
<Provider store={store}>
<IntlProvider locale={locale} messages={messages}>
<AppRoot ... />
</IntlProvider>
</Provider>,
domNode
);
const getErrorPage: FallbackRender = (errorData): React.ReactNode => {
const { foo } = store.getState();
return (<DefaultErrorPage {...foo, ...errorData} />);
};
So I need to figure out 1.) how to hook into the global Sentry error handler so I can 2.) manually trigger the ReactDOM.render() with the ErrorPage component instead of the root App. Can anyone help point me in the right direction? Thanks!
I have a component named AddEditVehicle which renders when the route is /vehicle/:vehicleId/edit.
I need to test the React lifecycles of this component. So I have used Enzyme mount to render my component in the unit test in the following way.
beforeEach(async () => {
wrapper = await mount(
<BrowserRouter>
<Provider store={store}>
<AddEditVehicle match={{ params: { vehicleId } }} />
</Provider>
</BrowserRouter>
);
await wrapper.update();
});
this wrapper fails to pass the required params making following specs to fail.
it("expect `isEditMode` value to set", () => {
const componentState = wrapper.find("AddEditVehicle").instance().state;
expect(componentState.isEditMode).toEqual(true);
});
Versions :
react ^16.4.2
react-router ^4.3.1
jest ^23.5.0
enzyme ^3.4.4
The problem with my approach was my Component was part of a Route but still, I was wrapping the component with withRouter which is redundant. So, in the unit test when I was passing the Route match details it was getting overridded. Thus, removing the withRouter made the solution work.
I'm using react native 0.40 with jest 20. When trying to test the inner method of a component I fail because I cannot get the instance of it and then call the method.
For example I can test the rendered component using the snapshots like
it('renders correctly', () => {
var store = mockStore(initialState);
const tree = renderer.create(
<Provider store={store}>
<App/>
</Provider>
).toJSON()
expect(tree).toMatchSnapshot()
})
But if I try to test an inner method of the App component I don't find any way to access it.
So the following code will not run
it("checks version number correctly", () => {
var store = mockStore(initialState);
const tree = renderer.create(
<Provider store={store}>
<App/>
</Provider>
)
expect(tree.needsUpdate("1.0.0")).toBe(true)
})
The solution some people used was "react-test-renderer/shallow" or "enzyme" to shallow render the component and access the inner method, but the first one cannot be found when I import it (maybe related to RN version?) and enzyme cannot be installed properly (maybe again, a dependency issue). So what I wonder is, what's the best way to test an inner method.
You don't have to actually wrap your component in a provider. If you just want to test your component, you can export it without connect()(). For instance:
export class App extends React.Component {
// your things
}
export default connect()(App);
Inside your test file, you can import your app like so:
import ConnectedApp, { App } from "../App";
Then when you want to test your encapsulated App, you can treat it like any other standard component:
const props = {
// mocked-out props your store would provide
};
const component = shallow(<App {...props} />);
component.instance().whateverMethodYouWant();
Personally, I never wrap a component in a mock provider unless I need to render and deeper components are connected.
Switched to router v4 and history v4.5.1 and now history listener not working
import createBrowserHistory from 'history/createBrowserHistory'
const history = createBrowserHistory()
history.listen((location, action) => {
console.log(action, location.pathname, location.state) // <=== Never happens
})
render(
<Provider store={store}>
<Router history={history}>
...
</Router>
</Provider>,
document.getElementById('root')
)
Any ideas why it is being ignored?
Since you are using BrowserRouter(with import alias Router as mentioned in comments of the question), it doesn't care the history prop you pass in. Instead of that it internally creates and assigns new browser history to the Router. So the history instance that you listen and being used in Router is not the same. That's why your listener doesn't work.
Import the original Router.
import { Router } from 'react-router-dom';
It will work as you expect.
The problem is that you are creating your own history object and passing it into the router. However, React Router v4 already provides this object for you, via this.props. (Importing Router has nothing to do with this)
componentDidMount() {
this.props.history.listen((location, action) => console.log('History changed!', location, action));
}
You may need to layer your app a bit more though, like below, and put this componentDidMount method in your MyApp.jsx and not directly at the very top level.
<Provider store={store}>
<BrowserRouter>
<MyApp/>
</BrowserRouter>
</Provider>
(Or use NativeRouter instead of BrowserRouter if you're doing React Native)
works like a magic: 🧙♂️🧙♂️🧙♂️
const history = useHistory();
useEffect(() => {
if (history) { // for jest sake ))
history.listen(() => {
store.reset();
});
}
}, []);