Вы можете переместить повторяющийся код в опишите функцию блока beforeEach
блока, и вы можете проверить и убедиться, что addNewAxis
и deleteNewAxisByID
вызываются с правильными значениями.Наконец, ваша функция handleChange
немного сбивает с толку из-за соглашения об именах, вместо этого старайтесь сохранять ее один к одному.
Вы можете изменить свою функцию handleChange
на:
handleChange = e => {
const { name, value } = e.target;
const { id } = this.props;
const newAxis = { id, [name]: value };
this.setState(newAxis, () => this.props.addNewAxis(newAxis)); //updates state first, then once updated, calls addNewAxis
}
Затем вы можете проверить методы и последующие вызовы функций:
import React from 'react';
import { shallow } from 'enzyme';
import SomeComponent from './SomeComponent.js';
// jest mock functions (mocks this.props.func)
const addNewAxis = jest.fn();
const deleteAxisByID = jest.fn();
// defining this.props
const initialProps = {
id: "abcd-1234-efgh-5678",
addNewAxis,
deleteAxisByID
}
describe('Some Component', () => {
let wrapper;
beforeEach(() => wrapper = shallow(<SomeComponent {...initialProps } />)); // before each test, shallow mount the Component
// Option 1 - adding a spy, updating the instance and manually changing the input
it('handles input changes and updates addNewAxis with a new value`, () => {
const name = "Line 10";
const value = 144;
const { id } = initialProps;
const newAxis = { id, [name]: value };
const spy = jest.spyOn(wrapper.instance(), 'handleChange'); // spys an instance of Component's handleChange method
wrapper.instance().forceUpdate(); // updates the instance to include the spy
const input = wrapper.find('input'); // finds the input -- you can also find by className or some other identifying DOM element: wrapper.find('input.add-axis')
input.simulate('change', { target: { value, name } }); // simulates an onChange event with values
expect(spy).toBeCalled();
expect(wrapper.state()).toContain(newAxis);
expect(addNewAxis).toBeCalledWith(newAxis);
spy.mockClear();
});
// Option 2 - calling the method directly
it('handles input changes and updates addNewAxis with a new value`, () => {
const name = "Line 10";
const value = 144;
const { id } = initialProps;
const newAxis = { id, [name]: value };
wrapper.instance().handleChange({ target: { value, name } }); // calls the instance handleChange method directly
expect(wrapper.state()).toContain(newAxis);
expect(addNewAxis).toHaveBeenCalledWith(newAxis);
});
// Same 2 options as above, up to your personal preference
it('deletes an axis`, () => {
const { id } = initialProps;
wrapper.instance().deleteAxis();
expect(deleteAxisByID).toHaveBeenCalledWith(id);
});
});