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;
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 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
})
I am trying to setup unit testing in React with Enzyme. When i run the command "npm-test" the test fails.
The console terminal indicates that it failed because of shallow().
I have installed enzyme using this command npm install --save enzyme enzyme-adapter-react-16 react-test-renderer. Do anyone know how to solve this issue?
Below is the component
import React from 'react';
class Login extends Component {
render() {
return <div><input
onChange={(event) => {
this.setState({input: event.target.value})}}
type="text" /></div>;
}
}
export default Login;
This is the unit test i have written for the Component.
import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Login from '../../../src/components/authentication/Login';
import Enzyme from 'enzyme';
configure({adapter: new Adapter()});
it("should create an entry in component state with the event value", () => {
// given
const component = shallow(<Login/>);
const form = component.find('input');
// when
form.props().onChange({target: {
name: 'myName',
value: 'myValue'
}});
// then
expect(component.state('input')).toEqual('myValue');
});
Thanks for the help.
Hi perhaps you miss the conventions:
you have to put your test files inside a __tests__ directory and tests file should be named: YourComponent.test.js
Than wrap your test within a test suite:
describe('Your test suite', () => {
test('it should do something', () => {
// the content of your test
});
});
Hi I was trying to test the react application With enzyme, But it throws an error TypeError: Adapter is not a constructor , Any Idea
This is my test file
import ProductRow from '../product_row';
import React from 'react';
// import { mount } from 'enzyme';
import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });
test('TodoComponent renders the text inside it', () => {
const wrapper = enzyme.mount(
<ProductRow item={{}} quickView={[]}
productPage={''}
count={0}
numberOfColumns={0}
title={'title'}
taxonomies={{}}
excerpt={'excerpt'}
/>
);
});
TypeError: Adapter is not a constructor
I don't think import * works as expected when importing a module with a default export, this should work:
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({ adapter: new Adapter() })
BTW. you can put the above in a file and reference it in your Jest settings so you don't have to add this to every test:
setupFiles: ['<rootDir>/tools/jest/setup-react-adapter.js'],
For TypeScript:
import { configure } from 'enzyme';
import * as ReactSixteenAdapter from 'enzyme-adapter-react-16';
const adapter = ReactSixteenAdapter as any;
configure({ adapter: new adapter.default() });
You need to use the import like this:
import Adapter from 'enzyme-adapter-react-16';
This way: (import * as Adapter from ...) returns a message "TypeError: Adapter is not a constructor."
In case you are using Typescript with the esModuleInterop option enabled, you'll need this:
import { configure} from 'enzyme';
import * as ReactSixteenAdapter from 'enzyme-adapter-react-16';
configure({ adapter: new (ReactSixteenAdapter as any)() });
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/')
})