I'm trying to test with Enzyme a React Native FlatList. I want to check if the right function is called when the list reaches the end:
import { listIsAtTheEnd } from "./actions";
import { mount } from "enzyme";
jest.mock("./actions");
describe("Main page", () => {
if("Calls listIsAtTheEnd when FlatList reaches the end", () => {
var app = mount(<App />);
var container = app.find("FlatListContainer");
var fList = container.childAt(0);
fList.instance().scrollToEnd();
expect(listIsAtTheEnd.mock.calls).toHaveLength(1)
})
})
But this is what I'm getting:
TypeError: this._scrollRef.scrollTo is not a function
at VirtualizedList.scrollToEnd (node_modules/react-native/Libraries/Lists/VirtualizedList.js:219:17)
at FlatList.scrollToEnd (node_modules/react-native/Libraries/Lists/FlatList.js:544:141)
at Object.<anonymous> (src/components/forumPage/__tests__/forumPageTests.js:81:21)
at tryCallTwo (node_modules/promise/lib/core.js:45:5)
at doResolve (node_modules/promise/lib/core.js:200:13)
at new Promise (node_modules/promise/lib/core.js:66:3)
What am I doing wrong? What's the correct way to test this?
As it stands it doesn't seem possible/very nice to test React Native with enzyme as soon as you go beyond a very simple shallow render and snapshot combo.
I've found using Test Renderer far more reliable to render out something like a FlatList, traversing it and invoking actions
In addition testing the above is going to be tricky, so far I've been checking the correct APIs are invoked using spies rather than actually testing the functionality as above.
This error happens though because scrollTo hasn't been correctly mocked on the ScrollView mock which you can hack around with jest.mock for example. See: this issue
Related
I am trying to test dynamic import in nextjs version 10.2.3, i tried using jest-next-dynamic library which avoid throwing error
TypeError: require.resolveWeak
but when i debug the component in jest test case i get below output and cannot get real component that should be loaded
<ForwardRef(LoadableComponent) .../>
My test case
it('should render Image component from next/Image', () => {
await preloadAll();
defaultProps = getDefaultProps(imgSrcFromAssetsLocation);
const ContainerImage = shallow(<ContainerImage { ...defaultProps } />);
console.log(ContainerImage.debug());
expect(ContainerImage.prop('layout')).toEqual('responsive');
});
After some time i figured out we need to wait for dynamic element to load in test case using waitFor or something similar, documentation of "jest-next-dynamic" does not include this, i found this from below github repo
github repo with example
I'm trying to test my React Application with React Testing Library and Jest but I always have the following error.
An update to StoreProvider inside a test was not wrapped in act(...)
I tried many things like put act() function around my test but can't be able to remove the warning and get the correct result.
Here's a simplified project that demonstate the problem:
https://codesandbox.io/s/adoring-haslett-6rq34?file=/src/PageContent.test.js
Thanks for your help.
Here's a working solution.
https://github.com/testing-library/react-testing-library/issues/641#event-3244842083
I have to waitFor an element
const { findByText } = render(<App />)
expect(await findByText('STATUS = 0')).toBeInTheDocument();
I am testing component using withTracker in its container.
An error happens:
TypeError: (0 , _reactMeteorData.withTracker) is not a function.
I think I haven't mock the react-meteor-data/withTracker yet. Can someone tell me how to mock it? Or is there any solution for this?
Inspired by How is Meteor's withTracker function executed differently than the former reactive container function createContainer?
I managed to upgrade the tests from createContainer to withTracker using the following:
In your mocked react-meteor-data.js file.
const createContainer = jest.fn((options = {}, component) => component );
const withTracker = jest.fn(Op => jest.fn(C => createContainer(Op, C)));
Then export withTracker instead of createContainer.
I'm learning TDD with React from this site, but don't understand how the author got describe and it, aren't these usually from Jasmine? I don't see this package in the author's node_modules at his github nor does his tests.js import anything that looks like describe or it. Where are these two methods coming from?
import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
describe('Test suite for User component', () => {
it('UserComponent should exist', () => {
let wrapper = shallow(<User />)
expect(wrapper).to.exist;
});
});
If that is the only it() statement that you are going to be using in your test suite, you do not really need the describe() block.
The describe() construct does indeed exist in Jest, it exists in Mocha as well.
The describe() function is used to group together certain sets of tests that have some common setup and tear down for each of them. This is why I said, based on the code you pasted, if you have nothing further to test, you do not need that describe() function.
So when you run create-react-app one of the libraries that got loaded automatically was the Jest test suite.
I would also rewrite that test, instead of UserComponent should exist, I would do
it('shows a user component', () => {
let wrapper = shallow(<User />);
expect(wrapper.find(User).length).toEqual(1);
});
So this is where I recommend to not just follow tutorials, but look up the documentation of the tools they are having you utilize in these tutorials. In the case of Enzyme, there is a really nice method called find() to find the component and it offers an array so you can add on .length and since its just one component of User you can add at the end .toEqual(1);
I'm currently trying to add Jest tests to a React application (found here).
However, when I run the following test,
/** #jsx React.DOM */
jest.dontMock('jquery');
jest.dontMock('../js/components/CategoryPage.jsx');
describe('Category Page', function() {
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var CategoryPage = require('../js/components/CategoryPage.jsx');
it('renders into the page correctly', function() {
// Render the CategoryPage into the document
var categoryPage = TestUtils.renderIntoDocument(
<CategoryPage params={{"category": "tests"}} />
);
expect(categoryPage).toBeDefined();
});
});
I get the following error:
● Category Page › it renders into the page correctly
- TypeError: Property 'makeHref' of object #<Object> is not a function
at Navigation.makeHref (/home/stephen/reps/node_modules/react- router/modules/mixins/Navigation.js:29:25)
at React.createClass.getHref (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:76:17)
at React.createClass.render (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:97:18)
at ReactCompositeComponentMixin._renderValidatedComponent (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:1260:34)
at wrapper [as _renderValidatedComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
at ReactCompositeComponentMixin.mountComponent (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:802:14)
at wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42)
at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32)
at ReactDOMComponent.Mixin.mountComponent (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:182:14)
at ReactDOMComponent.wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42)
at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32)
Both my app and the CategoryPage component specifically use react-router. The CategoryPage contains a mixin which uses react-router for authentication. Based on my own debugging, I have found that the error is occurring when Jest tries to call makeHref, one of react-router's built-in methods for Navigation.
To fix this, I first tried calling jest.dontMock('react-router'), but this did not have any effect. The problem seems to be that, by not mocking CategoryPage, jest will automatically and irreversibly include all of its dependecies, unmocked.
Part of the reason this issue is so difficult to solve is because most people using Jest with React seem to not be testing their components, either because they are not as test-focused or because they are using Flux and only testing Stores, Dispatchers, etc. We are not yet using Flux, so this is not an option for us, but may be something we have to transition to in the future.
EDIT 1: The test passes if I remove the jest.dontMock('../js/components/CategoryPage.jsx') but then it is impossible to actually test the functionality of that component.
EDIT 2: When I exclude jest.dontMock('jquery') I get another error related to the mixin I use to create Modals:
Category Page › it encountered a declaration exception
- TypeError:
/home/stephen/reps/js/components/CategoryPage.jsx:
/home/stephen/reps/js/components/Feed.jsx:
/home/stephen/reps/js/components/InvestmentButton.jsx:
/home/stephen/reps/js/components/Modal.jsx:
/home/stephen/reps/js/mixins/BootstrapModalMixin.jsx:
/home/stephen/reps/node_modules/bootstrap/dist/js/npm.js:
/home/stephen/reps/node_modules/bootstrap/js/alert.js: Cannot call method 'on' of undefined
EDIT 3: I have seemingly isolated the bug to react-router's Navigation mixin, where it calls this.context.makeHref. The React team has deprecated this.context since version .9 so I believe this may be the source of the problems. Thus, any work-around or fix for this.context is welcome.
I went ahead and put together a fix which allows you to still use Jest.
https://labs.chie.do/jest-testing-with-react-router/
I ended up figuring this out with some help from the creator of rackt-router after creating the issue found here: https://github.com/rackt/react-router/issues/465 .
I got around this by using Karma and Jasmine to test my application. I then used the stub function makeStubbedDescriptor found here: https://gist.github.com/rpflorence/1f72da0cd9e507ebec29.