score:3
it's happening because in your test environment you're not initiate the firebase app (using initializeapp
) and you probably shouldn't (you don't want to communicate with firebase every time you run a test, especially not unit tests).
this kind question also applies to other external services like your own server and external apis.
so how can you test your app?
the answer is mocking - supply an alternative implementations for those services to the tests environment. there are some kind of mocking, depends on what and how you want to mock. also, sometimes, the tools supply their own testkit (which, again, supply a testable implementation for the methods it expose).
in this case, you can use jest
mocking mechanizm to mock the response from firebase so your app "doesn't know" it received the data from other resource, and will act like it should.
the relevant jest methods are spyon
and mockimplementation
, and here is an example (i simplified your component):
app.spec.js
test("mount", async () => {
const fetchpromise = promise.resolve([{ name: "order1" }]);
jest.spyon(firebase, "app").mockimplementation(() => ({
firestore: () => ({
collection: () => ({
get: () => fetchpromise
})
})
}));
let wrapper = mount(<app />);
await fetchpromise;
wrapper.update();
expect(wrapper.find("span").text()).tobe("order1");
});
app.js
export default class app extends react.component {
state = {
orders: []
};
fetchorders() {
try {
app()
.firestore()
.collection(database_collection_orders)
.get()
.then((snapshot) => {
this.setstate({ orders: snapshot });
});
} catch {
console.log("do nothing");
}
}
componentdidmount() {
this.fetchorders();
}
render() {
return (
<div classname="app">
{this.state.orders.map((order) => (
<span key={order.name}>{order.name}</span>
))}
</div>
);
}
}
https://codesandbox.io/s/enzyme-setup-in-codesandbox-forked-jyij5?file=/src/app.js:133-730 (click on the tests tab)
Source: stackoverflow.com
Related Query
- Test class component firebase action with Jest
- mock useDispatch in jest and test the params with using that dispatch action in functional component
- How to unit test a Redux action in a component inside a connected Redux component with Jest
- Test a React Component function with Jest
- React Enzyme Jest test component with className
- How to test the state of a functional component in React with Jest (No Enzyme)
- How to test class instance inside a function with Jest
- How to test a children text component with Jest & Enzyme
- How to test with jest and typescript with types a basic react function component
- How to test a React component that has Router, Redux and two HOCs... with Jest and Enzyme?
- Test correct SVG component renders with jest and react-testing-library
- How to test a React component that uses context like in react-router 2.0 with Jest 0.8.x
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- How can I test an action with jest if this action has thunk and axios?
- Stateful React component with async function failing Jest test
- How to test styles and media queries rendered by a React component with Jest and/or Enzyme
- Test a React Component Mount with Jest
- Test an whole table React component cells with jest and Enzyme
- Props aren't passing inside component in test cases written with Jest and Enzyme
- jest with enzyme - how to test a component from other library
- how to jest test an async action with axios in react?
- How to test a React component that update over time with Jest and Enzyme?
- Jest with React - How do you render an entire component and test it?
- Test a React Component with Jest
- how to jest test an async action with axios in react ? - part 2
- Test React component that depends on a Promise with Jest
- Jest test fails on a react component which uses react-hooks-form with sharing refs
- How to test with Jest whether action created by action creator (and not passed as prop) fires?
- Test component with mock React Jest
- Jest Unit Test - Mocking component with props
More Query from same tag
- Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`
- Why does 'useState()' appear not to be working?
- Why does useEffect React Hook not work properly with dependency?
- How to add Email exist validation to react js based on Api resonse
- Getting a blank page on deploying the app on github
- Nested route link not working React Router
- How to pass props to Bootstrap OverlayTrigger overlay component?
- React JS this.state is undefined: Cannot read property 'components' of undefined, where components is a state of the "Board" Component
- Adding a radio button value to parent component in react
- Reflect changes without refresh in React
- Material-UI Accordion (formerly ExpansionTable) component won't import
- invoking Query of GraphQL of Apollo Client
- React Ant Design styles not loading
- Argument of type 'unknown' is not assignable to parameter of type 'string'. TS2345
- Call a collection once, and filter it several times firebase Reactjs
- Changing text inside upload button after uploading
- React: Conditional rendering CSS classes with Animate on Scroll library
- React Material-Table, How to bind data that is obtained remotely?
- Redux devtool extenstion : How to Add Features property to enable/disable actions?
- Material-UI - fetching data display in DataTable => "React.useState" cannot be called inside a callback
- What to use for two way binding in react js , props or state?
- Import JSON to component "TypeError: props.data.map is not a function"
- Error: Cannot read property 'state' of undefined, struggeling to get frontend to work
- mongodb data updated, but axios is fetching old data
- How to get same width in material-ui card component?
- Can I use setTimeout() on JavaScript as a parallel processed function
- How automatically compile jsx or tsx to js into visual studio code?
- Redirect in React with Typescript
- Error while dispatching from onChange event inside the return function
- Add quantity in eshop in react-redux