I am trying to test a component in react native, but it gets stuck on the shallow test. If I pass an incorrect component, the test fails, but if I pass a react-native text component it gets stuck.
import React from "react";
import Enzyme, {shallow, mount} from "enzyme";
import Screen from 'react-native-login'
import Adapter from "enzyme-adapter-react-16"
import { configure } from 'enzyme'
import {Text} from 'react-native'
configure({ adapter: new Adapter() })
test('render with react-native component', () => {
const wrapper = shallow(<Text />); // Hangs
})
Related
My test doesn't seem to importing my manual mock under __mocks__/Auth.js.
I have a module that I use, Auth.js in my react application, App.js. I am trying to mock that module using a manual mock by making a mocked file under __mocks__/Auth.js. My __mocks__ is at the same file level as App.js and Auth.js.
I have a repo here: https://github.com/chaselw/reactTesting
Or my test is below:
import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16'
import App from './App';
Enzyme.configure({ adapter: new EnzymeAdapter() });
test('logged in false', () => {
jest.mock('./Auth.js'); //Trying to get `auth.isLoggedIn() === false`
const wrapper = mount(<App />);
console.log(wrapper.debug())
expect(wrapper.exists("[data-test='Logged-In-False']")).toBe(true);
})
Expected result is that the test would return a "Logged-In-False" div from Login module after the if check on auth.isLoggedIn(). However I get the "true" div back.
In the test if I do: console.log(wrapper.auth.isLoggedIn()), it returns .isLoggedIn() is undefined.
I am new to React, jest and enzyme. I have no idea what is wrong, any help would be great! Thanks.
The solution was simple. jest.mock('./Auth.js') needs to be not inside a test, but rather at the top level as the imports.
import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16'
import App from './App';
jest.mock('./Auth');
Enzyme.configure({ adapter: new EnzymeAdapter() });
test('logged in false', () => {
//Trying to get `auth.isLoggedIn() === false`
const wrapper = mount(<App />);
console.log(wrapper.debug())
expect(wrapper.exists("[data-test='Logged-In-False']")).toBe(true);
})
I've a requirement same as
Jest + Enzyme: How to test an image src?
where I want to test Logo component that only consist image 'logo.png'. I've tried the solution answered by thierno.
Logo component
import React from 'react';
import PropTypes from 'prop-types';
export default function LogoJCpenney1({ logopath, logowidth }) {
return (
<img src={logopath} alt="logo" width={logowidth} className="logoOriginal"/>
);
}
LogoJCpenney1.propTypes = {
/** original logo path of JCPenney */
logowidth: PropTypes.string
};
LogoJCpenney1.defaultProps = {
className:"logoOriginal"
};
Test component
import React from 'react';
import {configure, shallow} from 'enzyme';
import LogoJCpenney1 from '../LogoJCpenney1/LogoJCpenney1';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter:new Adapter()});
import logoImage from "./../../containers/assets/img/jcpenneylogo1.png";
describe("<LogoJCpenney1 />", () => {
it("renders an image", () => {
const logo = shallow(<LogoJCpenney1 logoImage={logoImage} logowidth="50" />);
expect(logo.find("img").prop("src")).toEqual(logoImage);
});
});
Test result
Any help is appreciated.
You are sending a logoImage prop to your LogoJCpenney1 component, but what the component actually wants is a logopath prop (which it will use as the image's src). You shouldn't use the path to import in the actual logo image. You should just pass in the path as the logopath prop.
The reason you are getting Expected string but received undefined is because logo.find("img").prop("src") is, in fact, undefined... since you did not provide a logopath prop to your component.
Perhaps something like this:
import React from 'react';
import { configure, shallow } from 'enzyme';
import LogoJCpenney1 from '../LogoJCpenney1/LogoJCpenney1';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
const logopath = "../../containers/assets/img/jcpenneylogo1.png";
describe("<LogoJCpenney1 />", () => {
it("renders an image", () => {
const logo = shallow(<LogoJCpenney1 logopath={logopath} logowidth="50" />);
expect(logo.find("img").prop("src")).toEqual(logopath);
});
});
Based on the other StackOverflow post you referenced, you might be thinking, "But I don't just want to test that src is set correctly. I want to test that the img actually shows the jcpenneylogo1.png file."
I would advise against this. You don't need to test that an <img> properly displays an image file when given a src. That's third-party stuff that React and your browser have already taken care of, and it's not your job to test those things.
Since you're unit testing LogoJCpenney1, you just need to make sure that, when you pass LogoJCpenney1 a prop called logopath, then it renders an img that has a src equal to that logopath.
I have this container
import React from "react";
class App extends React.Component {
render() {
return (
<div className="App">
<input type="text" onChange={this.changeInput} />
<button onClick={this.addItem}>Add</button>
</div>
);
}
}
export default App;
Why can't I use shallow on it? My test looks like so
import App from "./index";
describe("App", function() {
it("should render", function() {
const wrapper = shallow(<App />);
//expect(wrapper).toBe(1);
});
});
The error says Enzyme expects an adapter to be configured, but found none. but I believed I've setup Enzyme correctly. I want to test whether App contain input and a button, but I'm stuck there..
demo https://codesandbox.io/s/21rz901mp0
Just install this package enzyme-adapter-react-16, and in your tests add those two lines :
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });
Create one enzyme.js file and add follwing code...
And import it into test unit-test case file
import Enzyme, { configure, shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
export { shallow, mount, render };
export default Enzyme;
i have following reactjs code snippet:
import lionIcon from 'assets/images/lion.svg';
import dogIcon from 'assets/images/dog.svg';
<img
className="animal-btn-img"
src={isLion ? lionIcon : dogIcon}
/>
how do i unit test that based on 'isLion' prop, appropriate animal object is set on the img tag.?
let img = wrapper.find('.animal-btn-img');
console.log(img.prop('src'));
the above console.log returns only empty object as {}
try shallow from enzyme, it worked well for me
import React from 'react'
import {shallow} from 'enzyme'
import Testor from '../components/Testor'
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
it('should see image source', () => {
const container = shallow(<Testor/>)
expect(container.find('img').props().src).toEqual('http://google.com/')
})
How can this be tested, to get jest coverage 100%
// #flow
import { AppRegistry } from 'react-native'
import App from './src/App'
AppRegistry.registerComponent('app', () => App)
The files that are this kind are 'index.ios.js' and 'index.android.js'
The default tests that come with a new React Native installation should do what you need as is.
import 'react-native';
import React from 'react';
import Index from './index.PLATFORM.js';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<Index />
);
});