I am just writing code on a personal project for learning.
I have a class defined as below:
import React from 'react';
export default class Counter{
counterValue = 0;
update(newValue){
this.counterValue = newValue;
}
getValue(){
return this.counterValue;
}
displayValue(){
return <div>{this.getValue()}</div>
}
}
I am trying to create a test on the displayValue() function. Code is below:
import React from "react";
import Counter from "./Counter";
import Adapter from "enzyme-adapter-react-16";
import { shallow, mount, render, configure } from "enzyme";
configure({ adapter: new Adapter() });
var c1 = new Counter();
c1.update(188);
describe("check displayValue() method", () => {
it("renders a div", () => {
const wrapper = shallow(c1.displayValue());
expect(wrapper.contains(<div>188</div>)).toBe(true);
});
});
I used the command npm test and a 'react-scripts test' was executed.
The test fails. It tells me that
expect(received).toBe(expected) // Object.is equality
Expected: true
Received: false
and the error is due to this line:
expect(wrapper.contains(<div>188</div>)).toBe(true);
I have trouble understanding this and would appreciate advice. Thank you!
you need to add {} to the number like this:
import React from "react";
import Counter from "./Counter";
import Adapter from "enzyme-adapter-react-16";
import { shallow, mount, render, configure } from "enzyme";
configure({ adapter: new Adapter() });
var c1 = new Counter();
c1.update(188);
describe("check displayValue() method", () => {
it("renders a div", () => {
const wrapper = shallow(c1.displayValue());
expect(wrapper.contains(<div>{188}</div>)).toBe(true);
});
});
for more detail check here
Related
I'm testing a functional component that uses Window.onload to stay on a certain page. Example of the code
function SignUpForm(props) {
const history = useHistory();
const {setOnPage } = props;
window.onload = setOnPage("/registrarse")
My test is:
import React from 'react'
import Enzyme from "enzyme";
import { screen, render } from '#testing-library/react'
import SignInScreen from './SignInScreen'
import Adapter from "enzyme-adapter-react-16"
const { shallow } = Enzyme;
Enzyme.configure({ adapter: new Adapter() })
describe('Test for login in form', () => {
test("renders correctly", () => {
shallow(<SignInScreen/>);
});
});
The error is in the line of Window.onload, I have not been able to find any solution that can help me.
setOnPage is not a function
Im using jest to test a simple button in React and it keeps failing. My latest iteration complains about render. I'm new to testing and I've been at it for a while and cannot figure this out. What am I missing here?
Here's my App.js
function clickMe() {
alert("Hello")
}
function App() {
return (
<div className="App">
<button id="btn" onClick={clickMe}>Click Me!!</button>
</div>
)
}
export default App;
Here's my App.test.js
import React from 'react'
import {render} from 'react-dom'
import App from './App'
test("Click", () => {
const {container} = render(<App />)
const button = getByTestId(container, 'btn')
fireEvent.click(button)
})
You can simulate some events with the enzyme library
For this first install this by npm, then import that
import {shallow} from 'enzyme';
After using this structure to simulate a click on a bottom
Create a wrapper
let wrapper = shallow(<App />);
beforeEach( ()=>{
wrapper = shallow(<CounterApp />);
});
This creates a simulation of render components and gives you the capacity to simulate events, this method is working in my project counterApp
test('Click', ()=>{
wrapper.find('button').at(0).simulate('click');
expect(//The action of your botton).toBe(//the result expected);
});
Not exactly the same but something like this also worked
import { shallow } from 'enzyme'
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import App from './App'
configure({ adapter: new Adapter() })
it('renders the link inside the output area', () => {
const output = shallow(<App />)
expect(output.find('div').find('button').length).toEqual(1)
})
Please help.
I cannot run test because in my util langProvider is package that drops tests.
I have to mock langProvider function or strings variable.
How I can do that?
import React, { ReactElement, useState } from 'react';
import langProvider from 'utils/langProvider';
import { HeaderStyled, DropDownStyled } from './styled';
import './style.scss';
function Header(props: any): ReactElement {
const [state, setState] = useState({
isDropDownOpened: false,
isDrawerOpened: false,
});
const strings = langProvider(props.language, 'components.header');
return (
<HeaderStyled className="header">
...
</HeaderStyled>
);
}
const mapStateToProps = (state: any) => ({
language: state.language,
});
export default connect(mapStateToProps)(Header);
My test file
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import React from 'react';
import Header from './index';
configure({ adapter: new Adapter() });
describe('<Header />', () => {
const wrapper = shallow(<Header />);
it('My test', () => {
expect('').toEqual('Header');
});
});
not sure, but you can try to insert in your test file before describe function, something like that:
jest.mock("utils/langProvider", () => ({langProvider: ()=> []}));
This is my js file
import React, { Component } from 'react';
export default class ProjectStore extends Component {
static lodingCount = 0;
constructor(props) {
super(props);
}
static setLodingCount(countValue){
ProjectStore.lodingCount = countValue;
}
static getLodingCount(){
return ProjectStore.lodingCount;
}
}
I wrote a test case for the same like below:
import React from 'react';
import {shallow} from 'enzyme';
import ProjectStore from '../projectStore.js';
describe('<ProjectStore />', () => {
it('should return loading count', () => {
const ProjectStore = shallow(<ProjectStore />);
ProjectStore.setLodingCount(2);
expect(ProjectStore.lodingCount).toEqual(2);
});
});
but when I executed npm test it returned:
ReferenceError: ProjectStore is not defined
What am I doing wrong here?
When testing a static method from a class, you don't need to render that component. All you need to do is calling that static method from that class like the following:
import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import ProjectStore from './projectStore.js';
describe('<ProjectStore />', () => {
it('should return loading count', () => {
ProjectStore.setLodingCount(2);
expect(ProjectStore.lodingCount).toEqual(2);
});
});
You can learn more from this answer.
As the title states I'm trying to test for a null return value on a react component.
I have tried the solution here, but code coverage is saying we haven't properly tested for line 7: return null. What am I missing here?
Component:
import React from 'react';
import { func, bool } from 'prop-types';
import CloudyAlert from '../../assets/alert_cloud.svg';
const Alert = props => {
if (!props.show) {
return null;
}
return (
<div onClick={props.onDismiss} className="alert">
<img src={CloudyAlert} alt="alert to let you know time is up" />
<button>Ok</button>
</div>
);
};
Alert.propTypes = {
onDismiss: func.isRequired,
show: bool
};
export default Alert;
Test:
import React from 'react';
import Enzyme from 'enzyme';
import Alert from '../Alert';
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
describe('Alert', () => {
it('renders when show is true', () => {
let wrapper = mount(<Alert onDismiss={jest.fn()} show />);
it('renders correctly', () => {
expect(toJson(wrapper)).toMatchSnapshot();
});
it('shows alert when start is clicked and time is zero', () => {
expect(wrapper.find('Alert').props().show).toBe(true);
});
it('does not show alert when show is false', () => {
wrapper = shallow(<Alert show={false} />);
expect(wrapper.type()).toEqual(null);
});
});
});
Solved: the relevant test was nested in another 'it' block