Traitanit Huangsri nottyo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| { | |
| "plugins": [ | |
| "test-selectors" | |
| ], | |
| "extends": [ | |
| "react-app", | |
| "react-app/jest", | |
| "plugin:test-selectors/recommended" | |
| ] | |
| }, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Select Testing</title> | |
| </head> | |
| <body> | |
| <div> | |
| <select disabled data-testid="test-select"> | |
| <option>A</option> | |
| <option>B</option> | |
| </select> |
nottyo
/ custom-renderer.tsx
Last active
February 25, 2022 13:12
React Testing Library - Render with React Router + Redux
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import reducer from './reducers'; | |
| import { render as rtlRender, RenderOptions } from '@testing-library/react'; | |
| import * as React from 'react'; | |
| import { Provider } from 'react-redux'; | |
| import { Router } from 'react-router-dom'; | |
| import { applyMiddleware, compose, Store, createStore } from 'redux'; | |
| import thunk from 'redux-thunk'; | |
| import { routerMiddleware } from 'react-router-redux'; | |
| import { createMemoryHistory } from 'history'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| describe('ESLint', () => { | |
| it('renders title', async () => { | |
| render(<Parent />); | |
| // Do not do this | |
| await waitFor(() => { | |
| expect(screen.getByText('title')).toBeInTheDocument(); | |
| }); | |
| // using waitFor() + getBy* queries | |
| // use findBy* queries instead | |
| expect(await screen.findByText('title')).toBeInTheDocument(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { render, screen } from '@testing-library/react'; | |
| import { rest, server } from '../tests/server'; | |
| import UserProfile from './UserProfile'; | |
| describe('UserProfile MSW', () => { | |
| it('render user name success with msw', async () => { | |
| // when | |
| render(<UserProfile />); | |
| // then |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import UserProfile from './User'; | |
| import userApi from '../service/user'; | |
| import { render, screen } from '@testing-library/react'; | |
| describe('User', () => { | |
| it('render user name success', async () => { | |
| // given | |
| const mockUser = { | |
| id: 1, | |
| name: 'nott', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { render, screen } from '@testing-library/react'; | |
| import userEvent from '@testing-library/user-event'; | |
| import Parent from './Parent'; | |
| describe('Parent Integration Test', () => { | |
| it('emit click increased event from child component', () => { | |
| // when | |
| render(<Parent />); | |
| const increaseButton = screen.getByTestId('increase-click'); | |
| userEvent.click(increaseButton); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| export type ChildProps = { | |
| name: string; | |
| onIncreaseClick: () => void, | |
| onDecreaseClick: () => void, | |
| } | |
| const Child = (props: ChildProps) => { | |
| const handleIncreaseClick = (event: React.MouseEvent<HTMLButtonElement>) => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState } from 'react'; | |
| import Child from './Child'; | |
| const Parent = () => { | |
| const [counter, setCounter] = useState(0); | |
| const handleChildClicked = (count: number) => { | |
| setCounter(count); | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| describe('Auto Generated Tests', () => { | |
| before(() => { | |
| cy.visit('https://todomvc.com/examples/react/') | |
| }) | |
| ;['English Text', 'ข้อความภาษาไทย', '$%#@,.;', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'] | |
| .forEach((text) => { | |
| it(`input text: "${text}" to todo list`, { viewportHeight: 1000, viewportWidth: 600 }, () => { | |
| cy.get('.new-todo').type(`${text}{enter}`) | |
| cy.get('.todo-list') | |
| .children() |