Я новичок в Jest и Enzyme, и я пытаюсь понять, как решить эту ошибку. Я перепробовал все возможные решения (в том числе те, что есть в stackoverflow).
Если это не правильный подход, я был бы признателен, если бы мне сказали, что это такое.
Что я хочу протестировать?
Компонент (с именем «Компания»), у которого есть кнопка «Добавить», и при ее нажатии открывается модальное окно (управляемое состоянием). Итак, я хочу проверить, используется ли при нажатии кнопки состояние для управления видимостью модальных изменений с «ложного» на «истинное».
Мой подход до сих пор:
Просматривая документы и множество ответов на stackoverflow, я изменил свой код в соответствии с тем, что сработало для меня.
Компания.js
import React from 'react';
import { Modal Col, Label, Row, Card, CardBody, CardColumns, CardHeader } from 'reactstrap';
import { connect } from 'react-redux';
import MUIDataTable from "mui-datatables";
const columns = [/*table data headers */ ]
export class Company extends React.Component {
state = {
show: false,
}
}
handleShow = () => {...}
componentDidMount() {
this.fetchCompanies();
}
fetchCompanies = () => { /*API calls */ }
render() {
const options = {
filterType: 'checkbox',
selectableRows:false,
customToolbar:() => {
return <Button className="btn btn-primary" id="companyAdd" onClick={this.handleShow}>Add</Button>
}
}
return (
<div>
<Col xs="12" lg="12">
<MUIDataTable
columns={columns}
options={options}
/>
</Col>
<Col xs="12" lg="12">
<Modal isOpen={this.state.showChangePwd}></Modal>
</div>
);
}
}
const mapDispatchToProps = dispatch => ({..});
function mapStateToProps(state) {..}
export default connect(mapStateToProps,mapDispatchToProps)(Company);
Я пытаюсь найти кнопку в объекте опций (внутри рендеринга)
Компания.test.js
import ReactDOM from "react-dom";
import {Company} from "../Company";
import { cleanup} from "@testing-library/react";
import "@testing-library/jest-dom";
import { configure, mount, shallow , render} from "enzyme";
afterEach(cleanup)
it("renders without crashing", () => {
expect(render(<Example/>))
})
it("renders button correctly", () => {
const onButtonClickMock = jest.fn();
const wrapper = shallow(<Example updateSelectedDashboard={onButtonClickMock}/>)
expect(wrapper.state('show')).toEqual(false);
const button = wrapper.find('companyAdd');
button.simulate('click')
expect(wrapper.state('show')).toEqual(true);
})
Я также пробовал .dive()
, но это не сработало.
<button data-test ='companyAdd'>Add </button> and tried to find in test code with
const wrapper = component.find([data-test='companyAdd']
);` даже это не работает 27.11.2020shallow
, в этом случаеfind()
будет углубляться только на один уровень. Вы должны либоmount
использовать свой компонент, либо использоватьdive()
(опять же, может быть этого будет недостаточно, используйте console.log илиdebug()
для проверки такого элемента). 27.11.2020mount
, иdebug()
помог мне найти кнопку с классом «companyAdd», но ошибка осталась прежней. 29.11.2020