From 416d0cc6a35aa283ac973460bbf3a6df9fc5ca3d Mon Sep 17 00:00:00 2001 From: yuki0410-dev <> Date: Sat, 9 Mar 2024 15:46:14 +0900 Subject: [PATCH] fix enzyme to RTL --- test/day_test.test.js | 58 ++++++--- test/helper_components/custom_input.jsx | 2 +- test/test_wrapper.jsx | 2 +- test/timepicker_test.test.js | 163 ++++++++++++------------ test/week_number_test.test.js | 32 +++-- test/week_test.test.js | 31 +++-- test/year_dropdown_options_test.test.js | 23 ++-- test/year_dropdown_test.test.js | 12 +- 8 files changed, 182 insertions(+), 141 deletions(-) diff --git a/test/day_test.test.js b/test/day_test.test.js index c9fa3b45e..6acdcad47 100644 --- a/test/day_test.test.js +++ b/test/day_test.test.js @@ -2,7 +2,6 @@ import React from "react"; import { render, fireEvent } from "@testing-library/react"; import { es } from "date-fns/locale"; import Day from "../src/day"; -import { mount } from "enzyme"; import { getDayOfWeekCode, newDate, @@ -30,7 +29,7 @@ describe("Day", () => { it("should apply the day of week class", () => { let day = newDate(); - for (var i = 0; i < 7; i++) { + for (let i = 0; i < 7; i++) { const className = "react-datepicker__day--" + getDayOfWeekCode(day); const container = renderDay(day); expect( @@ -1178,7 +1177,7 @@ describe("Day", () => { }); describe("click", () => { - var onClickCalled; + let onClickCalled; function onClick() { onClickCalled = true; @@ -1414,26 +1413,53 @@ describe("Day", () => { jest.resetAllMocks(); }); - it("should apply focus to the preselected day", () => { + it("should apply focus to the preselected day", async () => { const day = newDate(); - const dayInstance = mount( - , - ).instance(); + let instance; + render( + { + instance = node; + }} + day={day} + preSelection={day} + />, + ); + + const focusSpy = jest + .spyOn(instance.dayEl.current, "focus") + .mockImplementation(); + Object.defineProperty(document, "activeElement", { + value: undefined, + writable: false, + }); - jest.spyOn(dayInstance.dayEl.current, "focus"); - dayInstance.componentDidMount(); - expect(dayInstance.dayEl.current.focus).toHaveBeenCalledTimes(1); + instance.componentDidMount(); + expect(focusSpy).toHaveBeenCalledTimes(1); }); it("should not apply focus to the preselected day if inline", () => { const day = newDate(); - const dayInstance = mount( - , - ).instance(); + let instance; + render( + { + instance = node; + }} + day={day} + preSelection={day} + inline + />, + ); + + const focusSpy = jest.spyOn(instance.dayEl.current, "focus"); + Object.defineProperty(document, "activeElement", { + value: undefined, + writable: false, + }); - jest.spyOn(dayInstance.dayEl.current, "focus"); - dayInstance.componentDidMount(); - expect(dayInstance.dayEl.current.focus).not.toHaveBeenCalledTimes(1); + instance.componentDidMount(); + expect(focusSpy).not.toHaveBeenCalledTimes(1); }); }); diff --git a/test/helper_components/custom_input.jsx b/test/helper_components/custom_input.jsx index 2045986d3..c52c80582 100644 --- a/test/helper_components/custom_input.jsx +++ b/test/helper_components/custom_input.jsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; class CustomInput extends React.Component { onChange = (e) => { - var args = [e, e.target.value]; + let args = [e, e.target.value]; if (this.props.onChangeArgs) { args = this.props.onChangeArgs(e); } diff --git a/test/test_wrapper.jsx b/test/test_wrapper.jsx index 12f0eab47..b50c7558b 100644 --- a/test/test_wrapper.jsx +++ b/test/test_wrapper.jsx @@ -2,7 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; -var TestWrapper = ({ className, children }) => ( +const TestWrapper = ({ className, children }) => (
{children}
); diff --git a/test/timepicker_test.test.js b/test/timepicker_test.test.js index ce803d045..132c7f2b9 100644 --- a/test/timepicker_test.test.js +++ b/test/timepicker_test.test.js @@ -1,18 +1,14 @@ import React from "react"; -import defer from "lodash/defer"; import DatePicker from "../src/index.jsx"; -import TestUtils from "react-dom/test-utils"; -import ReactDOM from "react-dom"; -import { findDOMNode } from "react-dom"; -import Time from "../src/time.jsx"; import { newDate, formatDate } from "../src/date_utils.js"; - import { getKey } from "./test_utils.js"; +import { render, fireEvent, waitFor } from "@testing-library/react"; describe("TimePicker", () => { let datePicker; let div; let onChangeMoment; + let instance; beforeEach(() => { div = document.createElement("div"); @@ -31,38 +27,45 @@ describe("TimePicker", () => { it("should allow time changes after input change", () => { renderDatePicker("February 28, 2018 4:43 PM"); setManually("February 28, 2018 4:45 PM"); - TestUtils.Simulate.focus(findDOMNode(datePicker.input)); - const time = TestUtils.findRenderedComponentWithType(datePicker, Time); - const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li"); - TestUtils.Simulate.click(lis[1]); + fireEvent.focus(instance.input); + + const time = datePicker.querySelector(".react-datepicker__time-container"); + const lis = time.querySelectorAll("li"); + fireEvent.click(lis[1]); expect(getInputString()).toBe("February 28, 2018 12:30 AM"); }); it("should allow for injected date if input does not have focus", () => { renderDatePicker("February 28, 2018 4:43 PM"); setManually("February 28, 2018 4:45 PM"); - TestUtils.Simulate.blur(datePicker.input); + fireEvent.blur(instance.input); renderDatePicker("February 28, 2018 4:43 PM"); expect(getInputString()).toBe("February 28, 2018 4:43 PM"); }); it("should not close datepicker after time clicked when shouldCloseOnSelect is false", () => { - var datePicker = TestUtils.renderIntoDocument( - , + let instance; + const { container } = render( + { + instance = node; + }} + shouldCloseOnSelect={false} + showTimeSelect + />, ); - var dateInput = datePicker.input; - TestUtils.Simulate.focus(findDOMNode(dateInput)); - const time = TestUtils.findRenderedComponentWithType(datePicker, Time); - const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li"); - TestUtils.Simulate.click(lis[0]); - expect(datePicker.state.open).toBe(true); + fireEvent.focus(instance.input); + const time = container.querySelector(".react-datepicker__time-container"); + const lis = time.querySelectorAll("li"); + fireEvent.click(lis[0]); + expect(instance.state.open).toBe(true); }); it("should show different colors for times", () => { const handleTimeColors = (time) => { return time.getHours() < 12 ? "red" : "green"; }; - const timePicker = TestUtils.renderIntoDocument( + const { container } = render( { focus />, ); - let redItems = TestUtils.scryRenderedDOMComponentsWithClass( - timePicker, - "react-datepicker__time-list-item red", + const redItems = container.querySelectorAll( + ".react-datepicker__time-list-item.red", ); - let greenItems = TestUtils.scryRenderedDOMComponentsWithClass( - timePicker, - "react-datepicker__time-list-item green", + const greenItems = container.querySelectorAll( + ".react-datepicker__time-list-item.green", ); - expect( - redItems !== undefined && - redItems.length === 24 && - greenItems !== undefined && - greenItems.length === 24, - ).toBe(true); + expect(redItems.length).toBe(24); + expect(greenItems.length).toBe(24); }); it("should handle 40 min time intervals", () => { @@ -95,7 +92,7 @@ describe("TimePicker", () => { }); expect(getInputString()).toBe("February 28, 2018 9:00 AM"); - findDOMNode(datePicker.input).focus(); + fireEvent.focus(instance.input); setManually("February 28, 2018 9:20 AM"); expect(getInputString()).toBe("February 28, 2018 9:20 AM"); @@ -108,7 +105,7 @@ describe("TimePicker", () => { }); expect(getInputString()).toBe("February 28, 2018 9:00 AM"); - findDOMNode(datePicker.input).focus(); + fireEvent.focus(instance.input); setManually("February 28, 2018 9:53 AM"); expect(getInputString()).toBe("February 28, 2018 9:53 AM"); @@ -121,73 +118,68 @@ describe("TimePicker", () => { }); expect(getInputString()).toBe("July 13, 2020 2:59 PM"); - findDOMNode(datePicker.input).focus(); + fireEvent.focus(instance.input); setManually("July 13, 2020 3:00 PM"); expect(getInputString()).toBe("July 13, 2020 3:00 PM"); }); it("should not contain the time only classname in header by default", () => { - const timePicker = TestUtils.renderIntoDocument( - , - ); - const header = TestUtils.scryRenderedDOMComponentsWithClass( - timePicker, - "react-datepicker__header--time--only", + const { container } = render(); + const header = container.querySelectorAll( + ".react-datepicker__header--time--only", ); expect(header).toHaveLength(0); }); it("should contain the time only classname in header if enabled", () => { - const timePicker = TestUtils.renderIntoDocument( + const { container } = render( , ); - const header = TestUtils.scryRenderedDOMComponentsWithClass( - timePicker, - "react-datepicker__header--time--only", + const header = container.querySelectorAll( + ".react-datepicker__header--time--only", ); expect(header).toHaveLength(1); }); it("should select time when Enter is pressed", () => { renderDatePicker("February 28, 2018 4:43 PM"); - TestUtils.Simulate.focus(findDOMNode(datePicker.input)); - const time = TestUtils.findRenderedComponentWithType(datePicker, Time); - const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li"); - TestUtils.Simulate.keyDown(lis[1], getKey("Enter")); + fireEvent.focus(instance.input); + const time = datePicker.querySelector(".react-datepicker__time-container"); + const lis = time.querySelectorAll("li"); + fireEvent.keyDown(lis[1], getKey("Enter")); expect(getInputString()).toBe("February 28, 2018 12:30 AM"); }); it("should select time when Space is pressed", () => { renderDatePicker("February 28, 2018 4:43 PM"); - TestUtils.Simulate.focus(findDOMNode(datePicker.input)); - const time = TestUtils.findRenderedComponentWithType(datePicker, Time); - const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li"); - TestUtils.Simulate.keyDown(lis[1], getKey(" ")); + fireEvent.focus(instance.input); + const time = datePicker.querySelector(".react-datepicker__time-container"); + const lis = time.querySelectorAll("li"); + fireEvent.keyDown(lis[1], getKey(" ")); expect(getInputString()).toBe("February 28, 2018 12:30 AM"); }); - it("should return focus to input once time is selected", (done) => { + it("should return focus to input once time is selected", async () => { document.body.appendChild(div); // So we can check the dom later for activeElement renderDatePicker("February 28, 2018 4:43 PM"); - const dateInput = findDOMNode(datePicker.input); - TestUtils.Simulate.focus(dateInput); - const time = TestUtils.findRenderedComponentWithType(datePicker, Time); - const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li"); - TestUtils.Simulate.keyDown(lis[1], getKey("Enter")); - - defer(() => { - expect(document.activeElement).toBe(dateInput); - done(); + const input = datePicker.querySelector("input"); + fireEvent.focus(instance.input); + const time = datePicker.querySelector(".react-datepicker__time-container"); + const lis = time.querySelectorAll("li"); + fireEvent.keyDown(lis[1], getKey("Enter")); + + await waitFor(() => { + expect(document.activeElement).toBe(input); }); }); it("should not select time when Escape is pressed", () => { renderDatePicker("February 28, 2018 4:43 PM"); - TestUtils.Simulate.focus(findDOMNode(datePicker.input)); - const time = TestUtils.findRenderedComponentWithType(datePicker, Time); - const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li"); - TestUtils.Simulate.keyDown(lis[1], getKey("Escape")); + fireEvent.focus(instance.input); + const time = datePicker.querySelector(".react-datepicker__time-container"); + const lis = time.querySelectorAll("li"); + fireEvent.keyDown(lis[1], getKey("Escape")); expect(getInputString()).toBe("February 28, 2018 4:43 PM"); }); @@ -196,10 +188,10 @@ describe("TimePicker", () => { renderDatePicker("February 28, 2018 4:43 PM", { onKeyDown: onKeyDownSpy, }); - TestUtils.Simulate.focus(findDOMNode(datePicker.input)); - const time = TestUtils.findRenderedComponentWithType(datePicker, Time); - const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li"); - TestUtils.Simulate.keyDown(lis[1], getKey("Escape")); + fireEvent.focus(instance.input); + const time = datePicker.querySelector(".react-datepicker__time-container"); + const lis = time.querySelectorAll("li"); + fireEvent.keyDown(lis[1], getKey("Escape")); expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); @@ -208,10 +200,10 @@ describe("TimePicker", () => { renderDatePicker("February 28, 2018 4:43 PM", { onKeyDown: onKeyDownSpy, }); - TestUtils.Simulate.focus(findDOMNode(datePicker.input)); - const time = TestUtils.findRenderedComponentWithType(datePicker, Time); - const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li"); - TestUtils.Simulate.keyDown(lis[1], getKey("Enter")); + fireEvent.focus(instance.input); + const time = datePicker.querySelector(".react-datepicker__time-container"); + const lis = time.querySelectorAll("li"); + fireEvent.keyDown(lis[1], getKey("Enter")); expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); @@ -220,20 +212,20 @@ describe("TimePicker", () => { renderDatePicker("February 28, 2018 4:43 PM", { onKeyDown: onKeyDownSpy, }); - TestUtils.Simulate.focus(findDOMNode(datePicker.input)); - const time = TestUtils.findRenderedComponentWithType(datePicker, Time); - const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li"); - TestUtils.Simulate.keyDown(lis[1], getKey(" ")); + fireEvent.focus(instance.input); + const time = datePicker.querySelector(".react-datepicker__time-container"); + const lis = time.querySelectorAll("li"); + fireEvent.keyDown(lis[1], getKey(" ")); expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); function setManually(string) { - TestUtils.Simulate.focus(datePicker.input); - TestUtils.Simulate.change(datePicker.input, { target: { value: string } }); + fireEvent.focus(instance.input); + fireEvent.change(instance.input, { target: { value: string } }); } function getInputString() { - return findDOMNode(datePicker.input).value; + return instance.input.value; } function renderDatePicker(string, props) { @@ -241,7 +233,7 @@ describe("TimePicker", () => { } function renderDatePickerFor(selected, props) { - datePicker = ReactDOM.render( + datePicker = render( { onChange={onChange} showTimeSelect {...props} + ref={(node) => { + instance = node; + }} />, div, - ); + ).container; } function onChange(m) { diff --git a/test/week_number_test.test.js b/test/week_number_test.test.js index 284a098fc..0e738db97 100644 --- a/test/week_number_test.test.js +++ b/test/week_number_test.test.js @@ -1,6 +1,5 @@ import React from "react"; import WeekNumber from "../src/week_number"; -import { shallow } from "enzyme"; import { render, fireEvent } from "@testing-library/react"; import * as utils from "../src/date_utils"; @@ -50,27 +49,30 @@ describe("WeekNumber", () => { }); describe("Component Lifecycle", () => { - const handleFocusWeekNumberMock = jest.fn(); + let handleFocusWeekNumberSpy; beforeEach(() => { - weekNumber = shallow(); - instance = weekNumber.instance(); - instance.handleFocusWeekNumber = handleFocusWeekNumberMock; - }); - - afterEach(() => { - handleFocusWeekNumberMock.mockClear(); + weekNumber = render( + { + instance = node; + }} + weekNumber={1} + date={new Date()} + />, + ); + handleFocusWeekNumberSpy = jest.spyOn(instance, "handleFocusWeekNumber"); }); it("should call handleFocusWeeknumber on mount", () => { instance.componentDidMount(); - expect(handleFocusWeekNumberMock).toHaveBeenCalledTimes(1); + expect(handleFocusWeekNumberSpy).toHaveBeenCalledTimes(1); }); it("should call handleFocusWeekNumber with prevProps on update", () => { const prevProps = { someProp: "someValue" }; instance.componentDidUpdate(prevProps); - expect(handleFocusWeekNumberMock).toHaveBeenCalledWith(prevProps); + expect(handleFocusWeekNumberSpy).toHaveBeenCalledWith(prevProps); }); }); @@ -335,14 +337,17 @@ describe("WeekNumber", () => { }); describe("handleFocusWeekNumber", () => { - let weekNumberEl, instance, shallowWeekNumber; + let weekNumberEl, instance; const createComponentWithProps = (props = {}) => { const currentWeekNumber = new Date(); const selected = currentWeekNumber; const preSelection = currentWeekNumber; - shallowWeekNumber = shallow( + render( { + instance = node; + }} weekNumber={1} date={currentWeekNumber} selected={selected} @@ -350,7 +355,6 @@ describe("WeekNumber", () => { {...props} />, ); - instance = shallowWeekNumber.instance(); instance.weekNumberEl = weekNumberEl; instance.getTabIndex = jest.fn(() => 0); instance.isSameDay = jest.fn(() => true); diff --git a/test/week_test.test.js b/test/week_test.test.js index 44d88273a..749bcf519 100644 --- a/test/week_test.test.js +++ b/test/week_test.test.js @@ -1,7 +1,6 @@ import React from "react"; import { render, fireEvent } from "@testing-library/react"; import Week from "../src/week"; -import { shallow } from "enzyme"; import * as utils from "../src/date_utils"; describe("Week", () => { @@ -221,33 +220,42 @@ describe("Week", () => { const day = new Date("2022-02-01"); const weekNumber = 5; const event = { target: {} }; - const wrapper = shallow( + let instance; + render( { + instance = node; + }} + day={day} onWeekSelect={onWeekSelect} showWeekPicker={false} shouldCloseOnSelect={false} setOpen={() => {}} />, ); - wrapper.instance().handleWeekClick(day, weekNumber, event); + instance.handleWeekClick(day, weekNumber, event); expect(onWeekSelect).toHaveBeenCalledWith(day, weekNumber, event); }); it("should call handleDayClick with start of week if showWeekPicker prop is true", () => { - const handleDayClick = jest.fn(); const day = new Date("2022-02-01"); const weekNumber = 5; const event = { target: {} }; - const wrapper = shallow( + let instance; + render( { + instance = node; + }} + day={day} onWeekSelect={() => {}} showWeekPicker shouldCloseOnSelect={false} setOpen={() => {}} />, ); - wrapper.instance().handleDayClick = handleDayClick; - wrapper.instance().handleWeekClick(day, weekNumber, event); + const handleDayClick = jest.spyOn(instance, "handleDayClick"); + instance.handleWeekClick(day, weekNumber, event); const startOfWeek = utils.getStartOfWeek(day); expect(handleDayClick).toHaveBeenCalledWith(startOfWeek, event); }); @@ -257,15 +265,20 @@ describe("Week", () => { const day = new Date("2022-02-01"); const weekNumber = 5; const event = { target: {} }; - const wrapper = shallow( + let instance; + render( { + instance = node; + }} + day={day} onWeekSelect={() => {}} showWeekPicker={false} shouldCloseOnSelect setOpen={setOpen} />, ); - wrapper.instance().handleWeekClick(day, weekNumber, event); + instance.handleWeekClick(day, weekNumber, event); expect(setOpen).toHaveBeenCalledWith(false); }); }); diff --git a/test/year_dropdown_options_test.test.js b/test/year_dropdown_options_test.test.js index 586c221e5..727041636 100644 --- a/test/year_dropdown_options_test.test.js +++ b/test/year_dropdown_options_test.test.js @@ -1,6 +1,5 @@ import React from "react"; import YearDropdownOptions from "../src/year_dropdown_options.jsx"; -import { mount } from "enzyme"; import { render, fireEvent } from "@testing-library/react"; import * as utils from "../src/date_utils.js"; import onClickOutside from "react-onclickoutside"; @@ -126,16 +125,16 @@ describe("YearDropdownOptions", () => { }); it("calls the supplied onCancel function on handleClickOutside", () => { - const WrappedYearDropdownOptions = onClickOutside(YearDropdownOptions) + const WrappedYearDropdownOptions = onClickOutside(YearDropdownOptions); render( + />, ); - fireEvent.mouseDown(document.body) - fireEvent.touchStart(document.body) + fireEvent.mouseDown(document.body); + fireEvent.touchStart(document.body); expect(onCancelSpy).toHaveBeenCalledTimes(2); }); @@ -473,21 +472,25 @@ describe("YearDropdownOptions with scrollable dropwdown", () => { it("should scroll year dropdown to the middle on open", () => { const onCancelSpy = jest.fn(); const onChangeSpy = jest.fn(); - const yearDropdownInstance = mount( + let instance; + render( { + instance = node; + }} onCancel={onCancelSpy} onChange={onChangeSpy} scrollableYearDropdown year={2015} yearDropdownItemNumber={25} />, - ).instance(); + ); - yearDropdownInstance.dropdownRef.current = { + instance.dropdownRef.current = { scrollHeight: 800, clientHeight: 400, }; - yearDropdownInstance.componentDidMount(); - expect(yearDropdownInstance.dropdownRef.current.scrollTop).toBe(200); + instance.componentDidMount(); + expect(instance.dropdownRef.current.scrollTop).toBe(200); }); }); diff --git a/test/year_dropdown_test.test.js b/test/year_dropdown_test.test.js index 342dad480..0c6d7c49d 100644 --- a/test/year_dropdown_test.test.js +++ b/test/year_dropdown_test.test.js @@ -5,8 +5,8 @@ import { render, fireEvent } from "@testing-library/react"; import { newDate } from "../src/date_utils.js"; describe("YearDropdown", () => { - var yearDropdown; - var lastOnChangeValue; + let yearDropdown; + let lastOnChangeValue; function onChangeMock(value) { lastOnChangeValue = value; @@ -37,7 +37,7 @@ describe("YearDropdown", () => { }); it("starts with the year options list hidden", () => { - var optionsView = yearDropdown.querySelectorAll( + const optionsView = yearDropdown.querySelectorAll( "react-datepicker__year-dropdown", ); expect(optionsView).toHaveLength(0); @@ -47,7 +47,7 @@ describe("YearDropdown", () => { fireEvent.click( yearDropdown.querySelector(".react-datepicker__year-read-view"), ); - var optionsView = yearDropdown.querySelectorAll( + const optionsView = yearDropdown.querySelectorAll( "react-datepicker__year-dropdown", ); expect(optionsView).not.toBeNull(); @@ -138,8 +138,8 @@ describe("YearDropdown", () => { }); it("calls the supplied onChange function when a different year is clicked", () => { - var onSelectSpy = jest.fn(); - var setOpenSpy = jest.fn(); + const onSelectSpy = jest.fn(); + const setOpenSpy = jest.fn(); yearDropdown = getYearDropdown({ dropdownMode: "select", onSelect: onSelectSpy,