I am new in unit testing in reactjs.
I tried to test my login component rendering
For testing, i am using JEST and enzyme.
[This is the error, i am getting]
Test case code:
import React from 'react';
import { shallow } from 'enzyme';
import Login from './index'; // Introduce the corresponding React component
it('renders Login page', () => {
const wrapper = shallow(<Login.WrappedComponent login={{ name: '' }} />);
})
i am using Real project with umi - https://ant.design/docs/react/practical-projects
can any one help me on this.
We can use connect from react-redux instead of umi.
actually umi is also using react-redux inside of it.
Replace this line in your component :
import { connect } from 'umi'
with
import { connect } from 'react-redux'
Related
I am new to testing and was trying to test a form that has redux implemented, but I am getting this error:
"could not find react-redux context value; please ensure the component
is wrapped in a "
Here is my code:
import React from 'react';
import LoginForm from './LoginForm';
import { shallow,mount } from 'enzyme'
it('should check form', () => {
const wrapper = mount(<LoginForm />);
let numberInput = wrapper.find('PhoneInput');
numberInput.simulate('change',{
target: {value:'jack'},
})
numberInput = wrapper.find('PhoneInput');
expect(numberInput.props().value).toEqual('Jack');
});
I tried replacing mount with shallow too but same result. I have looked into some other similar error but couldnt figure out the exact solution
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 have Dashboard component like below.
import React, { Component } from 'react';
import DataTable from './DataTable';
import { connect } from 'react-redux';
class Dashboard extends Component {
render() {
return <DataTable />;
}
}
export default connect()(Dashboard);
My test is like below
App.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import Dashboard from './components/Dashboard';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<Dashboard />, div);
ReactDOM.unmountComponentAtNode(div);
});
describe('Addition', () => {
it('knows that 2 and 2 make 4', () => {
expect(2 + 2).toBe(4);
});
});
I am trying to run test using this command npm test App.test.js.
I am getting below error
Invariant Violation: Could not find "store" in the context of "Connect(Dashboard)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Dashboard) in connect options.
Your Dashboard is connected to redux, which requires a store. You have a two possibilities :
use Enzyme and redux-mock-store in order to configure a store used when you're mounting your component. This is not well maintainable and leads to a strong dependency between Component and store.
export the non-connected Dashboard (in addition to the default export connected), and mount (eventually with the required props). This is much simpler and maintainable.
export class Dashboard extends Component {
render() {
return <DataTable />;
}
}
// Test :
import { Dashboard } from './components/Dashboard';
ReactDOM.render(<Dashboard />, div);
Note: I think you simplified your connect() for the example purpose, because it does not do anything here, but if this is your real implementation you could drop the connect part and still use the default export for your test.
Hi I'm trying to make a test for a component method that is passed in a number and returns a string. This is my first time writing test in react and I couldn't find any examples of what to do in my situation.
my code
import moment from "moment";
import React from 'react';
class ReactPage extends React.Component {
//some other functions
//turn number into money (returns string)
commafyMoney = (money) => {
return "$"+ money.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
//return fancy react webpage
render(){
return(
//stuff
);
}
}
export default ReactPage;
this is my attempt of testing the returned value
import {shallow, mount, render, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import ReactDOM from 'react-dom';
import ReactPage from './App';
it('commafyMoney(number)', () => {
const wrapper = shallow(<ReactPage />);
expect(wrapper.instance().commafyMoney(1234.56)).toEqual("$1,234.56");
});
Does anyone know how I can fix this test so it works?
Option 1: wrapper.instance()
You're missing some of the waffle required to set up enzyme.
import React from 'react'; // React must be in scope any time you write jsx.
configure({ adapter: new Adapter() }); // Let enzyme use the adapter.
Add these lines after your imports and the test should pass. (Assuming jest is configured properly.)
Option 2: Don't render the component.
Since the method you're testing does not directly affect the rendering of your component, you can just get an instance of the component without rendering.
import ReactPage from './App';
it('commafyMoney(number)', () => {
const page = new ReactPage;
expect(page.commafyMoney(1234.56)).toEqual("$1,234.56");
});
This raises the question of why is the method defined in the class instead of being a utility function imported from somewhere else. You would preferably move the method to another module where its easier to test.
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
});
});