I have nested describes in my tests and as usual I am using some beforeEach and before in describes. And one of my describe function calls helper function which creates dynamic tests (DRY). And mocha runs description of nested describe before beforeEach method. And my dynamically created it has comp as undefined.
const checkProps = (comp, propName, expectedvalue) => {
it(`${comp} should have ${propName} equal to ${expectedvalue}`, () => {
expect(comp.prop(propName)).to.equal(expectedvalue);
});
};
describe('Component', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<MyComponent />);
});
describe('prop checking', () => {
checkProps(wrapper, 'title', 'SomeTitle');
});
});
What is the best way todo it? Thanks in advance.
What happens
The Mocha Run Cycle runs all describe callback functions first (...which is also true for other testing frameworks such as Jest and Jasmine).
Then it runs the before hooks, then beforeEach hooks, and finally the it callbacks.
So checkProps runs as part of running the initial describe callbacks, and at that point wrapper is undefined, so as you have noticed the test description says undefined should have....
The beforeEach hook runs before the it callback function runs...but it redefines wrapper so when the it callback runs comp is still undefined and the test fails:
1) Component
prop checking
undefined should have title equal to SomeTitle:
TypeError: Cannot read property 'prop' of undefined
at Context.prop (test/code.test.js:15:19)
Solution
A couple of things need to be changed:
The component name needs to be available when it runs and at that point wrapper doesn't exist yet so you'll have to pass the name yourself.
If you pass an object to checkProps then you can set a wrapper property on the object during beforeEach and access that wrapper property within your test since the object is never redefined.
Here is a working test that should get you closer to what you are trying to do:
import * as React from 'react';
import { shallow } from 'enzyme';
const MyComponent = () => (<div title="SomeTitle">some text</div>);
const checkProps = (name, obj, propName, expectedvalue) => {
it(`${name} should have ${propName} equal to ${expectedvalue}`, () => {
expect(obj.wrapper.prop(propName)).to.equal(expectedvalue); // Success!
});
};
describe('Component', () => {
const obj = {};
beforeEach(() => {
obj.wrapper = shallow(<MyComponent />);
});
describe('prop checking', () => {
checkProps('MyComponent', obj, 'title', 'SomeTitle');
});
});
Related
I am writing unit tests for my react project using Jest and Enzyme.
As shown below, I passed a function named updateUser to the to-be-tested component EditCard via props.
describe('The EditCard screen', () => {
let wrapper;
beforeEach(() => {
const defaultProps: Partial<EditCardProps> = {
toggleEditing: jest.fn(),
user: mockUsers[0],
updateUser: jest.fn(), // passes this function to the "EditCard" component via props
showSnackbar: jest.fn(),
};
wrapper = shallow(<EditCard {...(defaultProps as EditCardProps)} />);
});
Then I want to test how many times it was called after simulating a click on a button.
it('should match the snapshot when the "Name" textfield is not filled and the "submit" button is clicked', () => {
wrapper.find('#Name').simulate('change', { target: { value: null } });
wrapper.find('#submit').simulate('click');
// Try to get the "updateUser" function from the props, but get "undefined".
expect(wrapper.prop('updateUser')).toHaveBeenCalledTimes(0);
});
But I got the error shown below:
Matcher error: received value must be a mock or spy function
Received has value: undefined
24 | wrapper.find('#Name').simulate('change', { target: { value: null } });
25 | wrapper.find('#submit').simulate('click');
> 26 | expect(wrapper.prop('updateUser')).toHaveBeenCalledTimes(0);
Could someone tell me where I did wrong? Why I cannot get the function from the props and undefined was returned?
Thanks in advance!
A few tweaks to your code should have it working...
import * as React from "react";
import { mount, ReactWrapper } from "enzyme";
import EditCard from "../path/to/EditCard";
/*
I'd recommend defining jest fns here to make them easier to reference anywhere
within the tests below; otherwise, it'll have to referenced via
'defaultProps.updateUser', 'defaultProps.showSnackbar', ...etc.
Using 'const' here allows us to define these variables within the
module's closure -- in short, only accessible within these tests and NOT
globally accessible (from other file tests).
*/
const showSnackbar = jest.fn();
const toggleEditing = jest.fn();
const updateUser = jest.fn();
/*
if the EditCard component is properly typed, then you shouldn't need to
add types to this 'defaultProps' object
*/
const defaultProps = {
showSnackbar,
toggleEditing,
updateUser,
user: mockUsers[0]
};
describe('The EditCard screen', () => {
let wrapper: ReactWrapper;
beforeEach(() => {
/*
I'd recommend mount over shallow because child components can be
deeply nested and require multiple .dive calls; however, if
you know the child components of "EditCard" are just simple JSX elements,
then shallow will be fine
*/
wrapper = mount(<EditCard {...defaultProps} />);
});
it("should not call 'updateUser' when the form is submitted with an empty '#Name' field", () => {
/*
I'm not sure what simulating "null" does for this input, but assuming this
input is required you should at least pass a string value -- assuming
"#Name" input is of type 'text' | 'password' | 'email' => string and
not a number. On a related note, if it's required, then simply remove this
code as it doesn't do much for the test.
*/
// wrapper.find('#Name').simulate('change', { target: { value: "" } });
/*
I'm assuming this then simulates a form submit. Unfortunately,
pressing the submit button won't work. Instead you'll have to
simulate a form submit. This is a limitation of Enzyme and last I
checked hasn't been/can't be fixed.
*/
wrapper.find('form').simulate('submit');
/*
it should then NOT call the jest.fn() "updateUser" when submitted since
'#Name' is empty. Notice that we're referencing 'updateUser' -- the jest fn
defined above -- and not the wrapper.prop fn.
*/
expect(updateUser).not.toHaveBeenCalled();
});
// include other tests...
});
Here's a working example (click the Tests tab to run tests):
I am trying to monkey patch an object created by react-test-renderer to add a .findById(testID) method, but inside the object I can't access other methods on the object.
Here is the relevant code in my test file.
import renderer from 'react-test-renderer'
beforeEach(() => {
//...
tree = renderer.create(<MyComponent {...props} />).root
Object.getPrototypeOf(tree).findById = function (testID) {
this.findAll((el) => {
return el.props.testID === testID
})
}
})
it('does something', () => {
const component = tree.findById('myTestId')
// ...
expect(/* something */)
})
Instead of having the findAll method on this it seems to be the global object. Why is this? I thought that if I call a method on an object that this will be set to that object when I use an old-school function function.
I am mapping over an array and then calling an external function. example
['error1', 'error2'].map(err => myFunc())
then in my jest test I am saying, expect myFunc() to have been called 2 times
but it's saying it is only called once
it's an external function defined as such
export const myFunc = () => {}
then when I import im doing
import { myFunc } from 'file/path'
jest.mock('file/path', () => ({
myFunc: jest.fn(),
}))
expect(myFunc.mock.calls).toHaveLength(2)
anyone see what I'm doing wrong? really makes no sense as function should be called for every item in array :/
I have some conditional logic in a component that reads window.location.pathname.
To test this I want to shallow render a component without touching the window, asserting, then shallow rendering again but this time with a different window.location.pathname and assert.
It seems like after the first shallow render enzyme locks the window object for all following renders. Ignoring any changes I make to the window object in the current process.
describe('SomeComponent', () => {
describe('render', () => {
it('default render', () => {
const component = <SomeComponent><div>test</div></SomeComponent>;
const wrapper = shallow(component);
expect(toJson(wrapper)).toMatchSnapshot();
});
});
describe('lifecycle', () => {
describe('componentDidMount', () => {
it('calls Foo.bar with the locations pathname', () => {
const pathname = '/test';
Object.defineProperty(window.location, 'pathname', {
writable: true,
value: pathname,
});
const wrapper = shallow(<SomeComponent />);
expect(Foo.bar.mock.calls[0][0]).toBe(pathname);
});
});
});
});
So the second test works when run by itself. But when that first test runs then the second test fails. Apparently enzyme doesn't let you update the window between test.
Is this true or am I missing something. If it is true then what would be an alternative to test this?
Thanks
I have a react component(this is simplified in order to demonstrate the issue):
class MyComponent extends Component {
handleNameInput = (value) => {
this.searchDish(value);
};
searchDish = (value) => {
//Do something
}
render() {
return(<div></div>)
}
}
Now I want to test that handleNameInput() calls searchDish with the provided value.
In order to do this I would like to create a jest mock function that replaces the component method.
Here is my test case so far:
it('handleNameInput', () => {
let wrapper = shallow(<MyComponent/>);
wrapper.searchDish = jest.fn();
wrapper.instance().handleNameInput('BoB');
expect(wrapper.searchDish).toBeCalledWith('BoB');
})
But all I get in the console is SyntaxError:
SyntaxError
at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15)
at run_xhr (node_modules/browser-request/index.js:215:7)
at request (node_modules/browser-request/index.js:179:10)
at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68)
at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45)
at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)
So my question is, how do I properly mock component methods with enzyme?
The method can be mocked in this way:
it('handleNameInput', () => {
let wrapper = shallow(<MyComponent/>);
wrapper.instance().searchDish = jest.fn();
wrapper.update();
wrapper.instance().handleNameInput('BoB');
expect(wrapper.instance().searchDish).toBeCalledWith('BoB');
})
You also need to call .update on the wrapper of the tested component in order to register the mock function properly.
The syntax error was coming from the wrong assingment (you need to assign the method to the instance). My other problems were coming from not calling .update() after mocking the method.
Needs to be replaced wrapper.update(); with wrapper.instance().forceUpdate();
#Miha's answer worked with a small change:
it('handleNameInput', () => {
let wrapper = shallow(<MyComponent/>);
const searchDishMock = jest.fn();
wrapper.instance().searchDish = searchDishMock;
wrapper.update();
wrapper.instance().handleNameInput('BoB');
expect(searchDishMock).toBeCalledWith('BoB');
})