I'm having a lot of trouble writing a test for the following code:
import { Table, TableBody, TableCell, TableHead, TableRow, Tooltip } from '@material-ui/core';
import React, { Component } from 'react';
const Status = ({ id, dependency}) => {
let text, tooltipText;
if (id === 'something' ) {
tooltipText = `Some helpful text.`;
text = "undefined";
} else if (id === 'other' ) {
tooltipText = `Some other helpful text.`;
text = "undefined";
} else{
tooltipText = `Unknown`;
text = "unknown";
}
return (
<Tooltip title={tooltipText} >
<span>
{text}
</span>
</Tooltip>
);
};
class StatusList extends Component {
render() {
const { cardTitle, dependencies, id } = this.props;
if (!dependencies) {
return null;
}
return (
<Card title={cardTitle}>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>STATUS</TableCell>
</TableRow>
</TableHead>
<TableBody>
{dependencies.map(dep => (
<TableRow key={dep.id}>
<TableCell>
<URL to={`/${dep.id}`}>{dep.id}</URL>
</TableCell>
<TableCell>
<Status id={id} dependency={dep} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
);
}
};
So far, I have the following tests:
import { shallow } from 'enzyme';
describe('test', () => {
const props = {
cardTitle: "Dependencies",
dependencies: [id: 'something'],
id: 'my-id'
};
it('renders', () => {
const wrapper = shallow(<Status {...props} />);
expect(wrapper.find(TableBody).find(TableRow)).toHaveLength(4);
});
});
Which works fine, but I now want to assert what's being rendered by the Status
function - i.e. I want to check the logic in there, and make sure that the right tooltipText
is being rendered. I have tried to write the following test:
it('renders row with expected status', () => {
const wrapper = shallow(<StatusList {...props} />);
expect(wrapper.find(Table).find(TableBody).find(TableRow).first().find(TableCell).find('Tooltip').props.title).toEqual('Some helpful text.');
});
but I get the error:
Expected value to equal: "Some helpful text." Received: undefined
and I'm not sure what I'm doing wrong..
Aucun commentaire:
Enregistrer un commentaire