Skip to content

Instantly share code, notes, and snippets.

@lucassimon
Created July 23, 2019 01:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lucassimon/f39e1d54703ac7fb65d66de5a0f77983 to your computer and use it in GitHub Desktop.
Save lucassimon/f39e1d54703ac7fb65d66de5a0f77983 to your computer and use it in GitHub Desktop.
Ajuda com testes no react ComponentDidMount, axios e setState
import React from 'react';
import { connect } from 'react-redux';
import {
Container, Grid, Menu,
} from 'semantic-ui-react';
import CustomerService from '../../services/CustomerService';
import { customerListStart, customerListSuccess, customerListError } from './actions';
import Create from './Create';
import List from './List';
export class Customers extends React.Component {
state = { customers: [] };
componentDidMount() {
this.fetch();
}
fetch = () => {
const { handleStart, handleSuccess, handleError } = this.props;
handleStart();
CustomerService.list()
.then((response) => {
const { data } = response.data;
this.setState({ customers: data });
handleSuccess();
})
.catch(error => handleError(error));
}
render() {
const { customers } = this.state;
return (
<div style={{ marginTop: '7em' }}>
<Container>
<Grid>
<Grid.Row>
<Grid.Column>
<Menu secondary>
<Menu.Menu position="right">
<Menu.Item><Create handleFetch={this.fetch} /></Menu.Item>
</Menu.Menu>
</Menu>
</Grid.Column>
</Grid.Row>
<List customers={customers} />
</Grid>
</Container>
</div>
);
}
}
const mapStateToProps = () => ({});
const mapDispatchToProps = dispatch => ({
handleStart() { dispatch(customerListStart()); },
handleSuccess() { dispatch(customerListSuccess()); },
handleError(payload) { dispatch(customerListError(payload)); },
});
const ConnectCustomers = connect(mapStateToProps, mapDispatchToProps)(Customers);
export default ConnectCustomers;
import React from 'react';
import axios from 'axios';
import { shallow } from 'enzyme';
import { CustomerResponse } from '../../../factories/customers';
import { Customers } from '../index';
jest.mock('axios');
// jest.mock('../../../services/CustomerService', () => {
// return { list: jest.fn() };
// });
const getWrapper = () => {
const props = {
handleStart: jest.fn().mockName('handleStart'),
handleSuccess: jest.fn().mockName('handleSuccess'),
handleError: jest.fn().mockName('handleError'),
};
const wrapper = shallow(<Customers {...props} />);
return { wrapper };
};
describe('Customers component', () => {
beforeEach(() => {
axios.get.mockClear();
});
it('should render Customers', async (done) => {
const response = CustomerResponse.build();
const headers = { headers: { Authorization: 'Bearer undefined' } };
axios.get.mockResolvedValue(response);
console.log(response)
const { wrapper } = getWrapper();
const instance = wrapper.instance();
instance.componentDidMount();
console.log(instance.state)
expect(axios.get).toHaveBeenCalled();
expect(axios.get).toHaveBeenCalledWith('/customers', headers);
expect(wrapper.setState).toHaveBeenCalled()
expect(wrapper.state('customers')).toBe([]);
wrapper.update()
expect(wrapper).toMatchSnapshot();
done();
});
});
Customers component
✕ should render Customers (8ms)
● Customers component › should render Customers
expect(jest.fn())[.not].toHaveBeenCalled()
Matcher error: received value must be a mock or spy function
Received has type: function
Received has value: [Function setState]
39 | expect(axios.get).toHaveBeenCalled();
40 | expect(axios.get).toHaveBeenCalledWith('/customers', headers);
> 41 | expect(wrapper.setState).toHaveBeenCalled()
| ^
42 | expect(wrapper.state('customers')).toBe([]);
43 | wrapper.update()
44 | expect(wrapper).toMatchSnapshot();
at Object.toHaveBeenCalled (src/containers/Customers/__tests__/index.test.js:41:30)
console.log src/containers/Customers/__tests__/index.test.js:33
{ data:
[ { id: '1',
name: 'Customer 1',
email: 'customer-1@mail.com',
cnpj: '137894561231',
phone: '31 99125 6051',
contact: 'Jhon Doe 1',
amount: 72000 },
{ id: '2',
name: 'Customer 2',
email: 'customer-2@mail.com',
cnpj: '137894561232',
phone: '31 99125 6052',
contact: 'Jhon Doe 2',
amount: 72000 },
{ id: '3',
name: 'Customer 3',
email: 'customer-3@mail.com',
cnpj: '137894561233',
phone: '31 99125 6053',
contact: 'Jhon Doe 3',
amount: 72000 },
{ id: '4',
name: 'Customer 4',
email: 'customer-4@mail.com',
cnpj: '137894561234',
phone: '31 99125 6054',
contact: 'Jhon Doe 4',
amount: 72000 } ],
message: 'Lista os/as Customers paginados(as).',
page: 1,
pages: 1,
params: { page_size: 10 },
resource: 'Customers',
status: 200,
total: 3 }
console.log src/services/CustomerService.js:14
{ Authorization: 'Bearer undefined' }
console.log src/services/CustomerService.js:14
{ Authorization: 'Bearer undefined' }
console.log src/containers/Customers/__tests__/index.test.js:37
{ customers: [] }
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 1.002s
Ran all test suites matching /src\/containers\/Customers\/__tests__\/index.test.js/i
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment