🦅 Custom jest matchers to test the state of React Native

Overview

jest-native

eagle

Custom jest matchers to test the state of React Native.


Build Status Code Coverage version downloads MIT License

All Contributors PRs Welcome Code of Conduct Discord

Watch on GitHub Star on GitHub

Table of Contents

The problem

You want to use jest to write tests that assert various things about the state of a React Native app. As part of that goal, you want to avoid all the repetitive patterns that arise in doing so like checking for a native element's props, its text content, its styles, and more.

This solution

The jest-native library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain.

Compatibility

These matchers should, for the most part, be agnostic enough to work with any React Native testing utilities, but they are primarily intended to be used with RNTL. Any issues raised with existing matchers or any newly proposed matchers must be viewed through compatibility with that library and its guiding principles first.

Installation

This module should be installed as one of your project's devDependencies:

npm install --save-dev @testing-library/jest-native

You will need react-test-renderer, react, and react-native installed in order to use this package.

Usage

Import @testing-library/jest-native/extend-expect once (for instance in your tests setup file) and you're good to go:

import '@testing-library/jest-native/extend-expect';

Alternatively, you can selectively import only the matchers you intend to use, and extend jest's expect yourself:

import { toBeEmpty, toHaveTextContent } from '@testing-library/jest-native';

expect.extend({ toBeEmpty, toHaveTextContent });

Matchers

jest-native has only been tested to work with RNTL. Keep in mind that these queries will only work on UI elements that bridge to native.

toBeDisabled

toBeDisabled();

Check whether or not an element is disabled from a user perspective.

This matcher will check if the element or its parent has a disabled prop, or if it has `accessibilityState={{disabled: true}}.

It also works with accessibilityStates={['disabled']} for now. However, this prop is deprecated in React Native 0.62

Examples

const { getByTestId } = render(
  <View>
    <Button disabled testID="button" title="submit" onPress={e => e} />
    <TextInput accessibilityState={{ disabled: true }} testID="input" value="text" />
  </View>,
);

expect(getByTestId('button')).toBeDisabled();
expect(getByTestId('input')).toBeDisabled();

toBeEnabled

toBeEnabled();

Check whether or not an element is enabled from a user perspective.

Works similarly to expect().not.toBeDisabled().

Examples

const { getByTestId } = render(
  <View>
    <Button testID="button" title="submit" onPress={e => e} />
    <TextInput testID="input" value="text" />
  </View>,
);

expect(getByTestId('button')).toBeEnabled();
expect(getByTestId('input')).toBeEnabled();

toBeEmpty

toBeEmpty();

Check that the given element has no content.

Examples

const { getByTestId } = render(<View testID="empty" />);

expect(getByTestId('empty')).toBeEmpty();

toContainElement

toContainElement(element: ReactTestInstance | null);

Check if an element contains another element as a descendant. Again, will only work for native elements.

Examples

const { queryByTestId } = render(
  <View testID="grandparent">
    <View testID="parent">
      <View testID="child" />
    </View>
    <Text testID="text-element" />
  </View>,
);

const grandparent = queryByTestId('grandparent');
const parent = queryByTestId('parent');
const child = queryByTestId('child');
const textElement = queryByTestId('text-element');

expect(grandparent).toContainElement(parent);
expect(grandparent).toContainElement(child);
expect(grandparent).toContainElement(textElement);
expect(parent).toContainElement(child);
expect(parent).not.toContainElement(grandparent);

toHaveProp

toHaveProp(prop: string, value?: any);

Check that an element has a given prop.

You can optionally check that the attribute has a specific expected value.

Examples

const { queryByTestId } = render(
  <View>
    <Text allowFontScaling={false} testID="text">
      text
    </Text>
    <Button disabled testID="button" title="ok" />
  </View>,
);

expect(queryByTestId('button')).toHaveProp('accessibilityStates', ['disabled']);
expect(queryByTestId('button')).toHaveProp('accessible');
expect(queryByTestId('button')).not.toHaveProp('disabled');
expect(queryByTestId('button')).not.toHaveProp('title', 'ok');

toHaveTextContent

toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean });

Check if an element or its children have the supplied text.

This will perform a partial, case-sensitive match when a string match is provided. To perform a case-insensitive match, you can use a RegExp with the /i modifier.

To enforce matching the complete text content, pass a RegExp.

Examples

const { queryByTestId } = render(<Text testID="count-value">2</Text>);

expect(queryByTestId('count-value')).toHaveTextContent('2');
expect(queryByTestId('count-value')).toHaveTextContent(2);
expect(queryByTestId('count-value')).toHaveTextContent(/2/);
expect(queryByTestId('count-value')).not.toHaveTextContent('21');

toHaveStyle

toHaveStyle(style: object[] | object);

Check if an element has the supplied styles.

You can pass either an object of React Native style properties, or an array of objects with style properties. You cannot pass properties from a React Native stylesheet.

Examples

const styles = StyleSheet.create({ text: { fontSize: 16 } });

const { queryByText } = render(
  <Text
    style={[
      { color: 'black', fontWeight: '600', transform: [{ scale: 2 }, { rotate: '45deg' }] },
      styles.text,
    ]}
  >
    Hello World
  </Text>,
);

expect(queryByText('Hello World')).toHaveStyle({ color: 'black', fontWeight: '600', fontSize: 16 });
expect(queryByText('Hello World')).toHaveStyle({ color: 'black' });
expect(queryByText('Hello World')).toHaveStyle({ fontWeight: '600' });
expect(queryByText('Hello World')).toHaveStyle({ fontSize: 16 });
expect(queryByText('Hello World')).toHaveStyle({ transform: [{ scale: 2 }, { rotate: '45deg' }] });
expect(queryByText('Hello World')).toHaveStyle({ transform: [{ rotate: '45deg' }] });
expect(queryByText('Hello World')).toHaveStyle([{ color: 'black' }, { fontWeight: '600' }]);
expect(queryByText('Hello World')).not.toHaveStyle({ color: 'white' });

Inspiration

This library was made to be a companion for RNTL.

It was inspired by jest-dom, the companion library for DTL. We emulated as many of those helpers as we could while keeping in mind the guiding principles.

Other solutions

None known, you can add the first!

Contributors

Thanks goes to these wonderful people (emoji key):


Brandon Carroll

💻 📖 🚇 ⚠️

Santi

💻

Marnus Weststrate

💻

Matthieu Harlé

💻

Alvaro Catalina

💻

ilker Yılmaz

📖

Donovan Hiland

💻 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

Comments
  • perf(ramda): Use individual imports

    perf(ramda): Use individual imports

    Import directly the function to avoid jest creating a context for all the ramda utilities

    What:

    Import directly the ramda functions instead of the global index

    Why:

    Jest create a virtual machine for every imported file in order to provide a secure context. this has been reported in different jest issues

    • https://github.com/facebook/jest/issues/7963
    • https://github.com/facebook/jest/issues/11234

    profiling my project i see that 500ms is spent in everyfile due to the setupFilesAfterEnv https://jestjs.io/docs/configuration#setupfilesafterenv-array

    Screenshot 2022-07-13 at 23 06 55

    and this is mainly because jest is creating a vm for each ramda function file

    Screenshot 2022-07-13 at 23 07 22

    This has a tradeoff as it's a bit of incovenience for the mantainers but as this library is very linked to jest, i feel is interesting to pay this small code penalty to provide a faster performance for the consumers.

    In my project we have over 200 test files and this change saved more than 30s on the CI testing time.

    How:

    Modify the import path to point directly to the function file.

    Checklist:

    • [x] Documentation added to the docs
    • [x] Typescript definitions updated
    • [X] Tests
    • [X] Ready to be merged
    released 
    opened by Ne3l 23
  • feat: add toBeVisible matcher

    feat: add toBeVisible matcher

    What:

    Add toBeVisible matcher following a similar logic as the jest-dom matcher (reference).

    Why:

    This matcher provides a useful way to verify that a queried element is actually visible.

    How:

    The matcher has been introduced based on the implementation of other matchers and trying to reproduce a similar logic as the jest-dom matcher (reference), but taking into account the React Native nuances.

    Checklist:

    • [x] Documentation added to the docs
    • [x] Typescript definitions updated
    • [x] Tests
    • [x] Ready to be merged
    released 
    opened by fluiddot 18
  • Property 'toHaveTextContent' does not exist on type 'Matchers<void> & ...' (and any other matcher from library)

    Property 'toHaveTextContent' does not exist on type 'Matchers & ...' (and any other matcher from library)

    • react-native or expo: expo
    • @testing-library/react-native version: 11.5.0
    • jest-preset: jest-expo
    • react-native version: 0.70.5
    • node version: v16.17.1
    • @testing-library/jest-native version: 5.3.3
    • jest version: 29.3.0

    Relevant code or config:

    expect(await screen.findByRole('alert')).toHaveTextContent(
      'Incorrect username or password'
    );
    

    What you did:

    Just using any matcher from jest-native.

    What happened:

    Typescript complains for missed types. For example, for toHaveTextContent matcher:

    Property 'toHaveTextContent' does not exist on type 'Matchers<void> & SnapshotMatchers<void, ReactTestInstance> &
    Inverse<JestMatchers<void, ReactTestInstance>> & PromiseMatchers<ReactTestInstance>'.ts(2339)
    

    image

    Reproduction:

    https://github.com/alexamy/react-native-testing-library-missing-matchers or the same code in zip archive: react-native-testing-library-missing-matchers-45392ed44fe4fa3de64723609f6a0f74227188a4.zip

    Problem description:

    There is no way to use custom matchers in typescript tests for obvious reason. This problem can be 'avoided' by skipping matcher typecheck with @ts-ignore or optionally skipping test typecheck altogether, but it is not really a solution.

    Suggested solution:

    Modify types in @testing-library/jest-native/extend-expect.d.ts to proper extend the matchers interface.

    Btw, there is also import problem on line 3.

    image

    Matchers interface from Jest: image

    I've tried to make declare global in project with extended jest' Matchers interface, but it seems that something is missed, I didn't get any working result from my tries, this interface seems to be unchanged.

    Can you help us fix this issue by submitting a pull request?

    I can make a Pull Request with solution for this problem if someone can point me how to properly modify definition file.

    opened by alexamy 14
  • feat: toBeOnTheScreen() matcher

    feat: toBeOnTheScreen() matcher

    What:

    Jest matcher toBeOnTheScreen():

    • it is re-implementation of Jest DOM matcher named toBeInTheDocument()
    • it checks whether given element is still part of the element tree

    Why:

    Before this query RNTL suggested using toBeTruthy() predicate on query results. It generally works fine for query that is issued just before making assertion, but it is not able to verify that a captured element has been removed from element tree.

    How:

    Adapted code from Jest DOM matchers.

    Checklist:

    • [x] Documentation added to the docs
    • [x] Typescript definitions updated
    • [x] Tests
    • [x] Ready to be merged

    @pierrezimmermannbam, @AugustinLF, @MattAgn wdyt?

    released 
    opened by mdjastrzebski 13
  • .toBeDisabled() buggy with RN 0.62

    .toBeDisabled() buggy with RN 0.62

    • react-native or expo: 0.62.1
    • @testing-library/react-native version: 3.1.0
    • react-native version: 0.62.1
    • node version: 12.16.1

    Latest version of RN deprecated accessibilityStates in favor of accessibilityState https://reactnative.dev/blog/2020/03/26/version-0.62#breaking-changes

    Seems like now it's an object https://github.com/facebook/react-native/commit/7b35f427fd66cb0f36921b992095fe5b3c14d8b9

    I suspect we need to change it here https://github.com/testing-library/jest-native/blob/77ca4408081e3371aeffe739ad12928c9119ff95/src/to-be-disabled.js#L28

    It's quite weird that in my codebase everything works fine except 1 use case where I have something like this

    <TouchableOpacity disabled testID="button">
      <Button disabled>
    

    And when I check it fails, no matter if the received output from jest seems to be correct and it has the disabled prop and it's true

    {
      "disabled": true,
      "testID": "button",
      "children": <Button>
    }
    

    Can you help us fix this issue by submitting a pull request?

    I checked the codebase and there is an intense use of ramda which hurts my eyes and find it quite difficult to work with, but I'll try to make a PR 😄

    opened by mtt87 13
  • Correct setup in react-native typescript project

    Correct setup in react-native typescript project

    Hello,

    There are any correct setup to use with TS?

    I try to import import '@testing-library/jest-native/extend-expect' in File.test.tsx, but it falls.

    Autocomplete and functions doesnt works.

    Versions:

       "@testing-library/jest-native": "^3.1.0",
        "@testing-library/react-native": "^5.0.3",
    

    Jest config:

     "jest": {
        "preset": "jest-expo",
        "transformIgnorePatterns": [
          "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base)"
        ],
        "setupFilesAfterEnv": [
          "./src/setupTest.js"
        ]
      }
    
    released 
    opened by yuritoledo 12
  • Property 'toHaveStyle' does not exist on type 'JestMatchers<any>'

    Property 'toHaveStyle' does not exist on type 'JestMatchers'

    I've just installed jest-native and when I try to use toHaveStyle() I got this error:

    Screen Shot 2021-12-23 at 4 46 12 p m

    This is the complete example:

    
    const commonStyles: TextStyle = {
      fontFamily: 'ProximaNova',
      fontSize: 14,
      lineHeight: 20,
      color: getColor('gray-100'),
    }
    
    describe('TextInfo', () => {
      it('should render the given text with default styles', () => {
        const { getByText } = render(<TextInfo>{sampleText}</TextInfo>)
        expect(getByText(sampleText)).toHaveStyle(commonStyles)
        expect(getByText(sampleText)).toBeTruthy()
      })
    
      it('should render the given text with custom styles', () => {
        const { getByText } = render(
          <TextInfo style={{ marginBottom: 8 }}>{sampleText}</TextInfo>,
        )
        expect(getByText(sampleText)).toHaveStyle({
          ...commonStyles,
          marginBottom: 8,
        })
        expect(getByText(sampleText)).toBeTruthy()
      })
    })
    
    

    How can I get rid off this error?

    opened by jorgeruvalcaba 10
  • breaking: Migrate codebase to typescript

    breaking: Migrate codebase to typescript

    What:

    closes #81.

    Why:

    Typescript provide type safety and ease of use for developers.

    How:

    As the repository is quite small, migrated all in once.

    Use typescript compiler instead of babel to create the dist build. (Babel with react-native-metro preset is optimised to run JS on hermes/jsc not node but it can be configured for it)

    Still some parts of the code are not 100% solved but i believe this is a good base to iterate on.

    Checklist:

    • [ ] Add typescript check step on github actions
    • [ ] Ensure new build output is good for node14.
    • [ ] Solve @ts-ignore comments
      • [ ] https://github.com/Ne3l/jest-native/blob/typescriptMigration/src/tests/utils.ts
      • [ ] https://github.com/Ne3l/jest-native/blob/typescriptMigration/src/to-have-style.ts
      • [ ] https://github.com/Ne3l/jest-native/blob/typescriptMigration/src/utils.ts#L130
      • [ ] https://github.com/Ne3l/jest-native/blob/typescriptMigration/src/tests/to-be-disabled.tsx
    • [ ] Check no breaking change is done(To solve some issues that typescript spotted i had to refactor the code. maybe a breaking change was introduced(i think not but a second check it's welcome))

    This is a BREAKING CHANGE

    breaking change released 
    opened by Ne3l 9
  • TypeScript fails to find extended expect methods

    TypeScript fails to find extended expect methods

    • react-native or expo: 0.59.2
    • @testing-library/react-native version: 4.0.2
    • @testing-library/jest-native version: 3.0.1
    • jest-preset: "@testing-library/react-native"
    • react-native version: 0.59.2
    • typescript version: 3.1.6
    • node version: 10.13.0

    Relevant code or config:

    import * as React from "react";
    import { Text } from "react-native";
    import { render } from "@testing-library/react-native";
    
    function Example() {
      return (
        <Text testID="text">2</Text>
      );
    }
    
    it("works without TypeScript errors", () => {
      const { getByTestId } = render(<Example />);
    
      expect(getByTestId("text")).toHaveTextContent("2");
    });
    

    What you did:

    Installed jest-native within a project using TypeScript.

    What happened:

    I get a TypeScript error when using any of the custom matchers from the library, e.g:

    Screenshot 2019-06-11 at 16 12 35
    Error:(14, 31) TS2339: Property 'toHaveTextContent' does not exist on type 'Matchers<Pick<ReactTestInstance, "type" | "props" | "parent" | "children" | "find" | "findAll">>'.
    

    Reproduction:

    See code above.

    Problem description:

    Without the correct typings, it's not possible to use the additional assertions from the library within a TypeScript project.

    Suggested solution:

    Since Jest exposes expect globally, it appears we need to merge the matchers in the global namespace, meaning extend-expect.d.ts should look like this:

    import { ReactTestInstance } from 'react-test-renderer';
    
    declare global {
      namespace jest {
        interface Matchers<R> {
          toBeDisabled(): R;
          toContainElement(element: ReactTestInstance | null): R;
          toBeEmpty(): R;
          toHaveProp(attr: string, value?: any): R;
          toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
          toBeEnabled(): R;
          toHaveStyle(style: object[] | object): R;
        }
      }
    }
    
    released 
    opened by lewie9021 9
  • `toHaveProp` not working on Button

    `toHaveProp` not working on Button

    • react-native or expo: react-native (ver. 4.8.0)
    • @testing-library/react-native version: 5.0.3
    • jest-preset: react-native
    • react-native version: 0.62.2
    • node version: v12.16.3

    Relevant code or config:

    import React from 'react';
    import {View, Text, Button} from 'react-native';
    import {render} from '@testing-library/react-native';
    import '@testing-library/jest-native/extend-expect';
    
    test('toHaveProp works correctly', () => {
      const {queryByTestId} = render(
        <View>
          <Text allowFontScaling={false} testID="text">
            text
          </Text>
          <Button disabled testID="button" title="ok" />
        </View>,
      );
    
      expect(queryByTestId('button')).toHaveProp('accessibilityStates', [
        'disabled',
      ]);
      expect(queryByTestId('button')).toHaveProp('accessible');
      expect(queryByTestId('button')).not.toHaveProp('disabled');
      expect(queryByTestId('button')).not.toHaveProp('title', 'ok');
    });
    
    

    What you did:

    Running toHaveProp sample code for jest-native website.

    What happened:

    Test fails with following error:

     FAIL  __tests__/jestNative.test.tsx
      ● toHaveProp works correctly
    
        expect(element).toHaveProp("accessibilityStates", ["disabled"]) // element.getAttribute("accessibilityStates") === ["disabled"]
    
        Expected the element to have prop:
          accessibilityStates=["disabled"]
        Received:
          null
    
          14 |   );
          15 | 
        > 16 |   expect(queryByTestId('button')).toHaveProp('accessibilityStates', [
             |                                   ^
          17 |     'disabled',
          18 |   ]);
          19 |   expect(queryByTestId('button')).toHaveProp('accessible');
    
          at Object.<anonymous> (__tests__/jestNative.test.tsx:16:35)
    
    Test Suites: 1 failed, 1 passed, 2 total
    Tests:       1 failed, 1 passed, 2 total
    Snapshots:   0 total
    Time:        2.456s, estimated 5s
    
    

    Reproduction:

    I've setup a repro repository on github: https://github.com/mdjastrzebski/repro-jest-native-to-have-prop

    Basically it's fresh React Native CLI projects, with current version of @testing-library/react-native and @testing-library/jest-native. I have also seen the same problem when using react-native-testing-library instead of @testing-library/react-native.

    Problem description:

    toHaveProp does not seem to recognize some props on the Button elements. Sample code from jest-native docs fails.

    Additional question: why is disabled and title from sample docs supposed to not be recognized by toHaveProp? Is it some issue related to Button or toHaveProp?

    Suggested solution:

    Fix 'toHaveProp' to work correctly on docs sample code OR fix the docs. Document and explain non-trival behavior when checking Button props.

    Can you help us fix this issue by submitting a pull request?

    Not really, as I do not know what should be the expected behavior.

    opened by mdjastrzebski 8
  • fix: change extend-expect types definition to support explicit jest globals

    fix: change extend-expect types definition to support explicit jest globals

    What:

    Change matchers type definitions to support explicit jest globals import from @jest/globals module.

    Why:

    If you are using explicit jest globals, matchers interface is imported from @jest/expect and has slightly different structure, so current solution (extending matchers interface in global namespace) isn't applicable.

    How:

    Matchers interface has been extracted to avoid duplication. Both Jest matchers interfaces (for explicit and implicit globals) are extended.

    Checklist:

    • [x] Documentation added to the docs (N/A)
    • [x] Typescript definitions updated
    • [x] Tests
    • [x] Ready to be merged

    Fixes https://github.com/testing-library/jest-native/issues/136.

    released 
    opened by alexamy 7
Releases(v5.4.0)
Owner
Testing Library
The home for all testing-library projects
Testing Library
YoutubeDownloader - A test project for learning React, Vue and TS

Requirements: Node.js 10.x Vue.JS 2.x Python 2.6+ FFMPEG Youtube-DL Installation Run command below in root directory npm install --production And inst

Matthias 0 Jan 1, 2022
Test-task-fullstack-dashboard - Full-stack dashboard App With React.js

Test Task: Full-stack dashboard app Link to task Link to Figma template Live Dem

Andrew Dryuk 1 Jan 6, 2022
🥄 Develop, test and document your React story components faster.

Ladle is an environment to develop, test, and share your React components faster. Documentation Demo Twitter StackBlitz Discord Quick start mkdir my-l

Vojtech Miksu 1.9k Jan 5, 2023
Experimental test runner based on vite

Va vite! vavite is a Vite plugin that provides SSR functionality that is environ

Fatih Aygün 211 Dec 31, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 141 Dec 29, 2022
React Template using TS, Best Practices of Context API, Testing Library and Jest, Axios, React-router-dom and Styled-Components

React Template using TS, Best Practices of Context API, Testing Library and Jest, Axios, React-router-dom and Styled-Components

Gustavo Bispo 3 May 12, 2022
React starter kit for static apps (NO SSR): React + Vite + wouter + jest + testing-library + Prettier + ESLint + Stylint

Intention is to have some light-weight starter kit for any react (static) applications. Faster ?? build time, type-safe, linting, etc, are the things which have been considered for this setup.

Manish Keer 4 Jul 26, 2022
A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box 📦

A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box ??

Patrick Jean Meurer 16 Dec 29, 2022
This is a template repository to get up and running quickly with: Express, React, Jest, Docker, and Github Actions for CI/CD.

This is a template repository to get up and running quickly with: Express, React, Jest, Docker, and Github Actions for CI/CD.

Harrison (Harry) Cramer 15 Oct 25, 2022
Vite templete for react typescript eslint jest tailwindcss

vite-react-ts-extended vite react-ts templete + eslint, jest, tailwindcss This is the official Vite template(npm init [email protected] myapp -- --template

Laststance.io 66 Dec 24, 2022
SSR template: Typescript + React + Router + Express + Jest

SSR: Typescript + React + Router + Express + Jest React server side rendering with Node Express server This template has the following main dependenci

Marcelo Augusto 15 Oct 30, 2022
Mobile Sport Application, created with React, Jest and SASS.

Mobile App Landing Page I denne opgave skal du sætte en præsentationsside op for en mobil applikation. Formål Formålet med opgaven er at få øvelse i O

Daniel N. Hjermitslev 1 Sep 19, 2022
Next js 12 boilerplate with SCSS, Jest, React Testing Library, Prettier, ESLint, Plop JS and more 🚀

Next.js 12 Complete Boilerplate This is a readme from next.js 12 complete boilerplate. Table of Contents Just to make your dev experience more simple

Douglas Henrique 51 Dec 29, 2022
A support react,vite,typescript,Eslint,jest,prettierrcWaiting for scaffolding

vite-react-cil A supportreact,vite,typescript,Eslint,jest,prettierrcWaiting for scaffolding English | 简体中文 ✨ characteristic Support Typescript Support

zsj1029 1 Dec 19, 2021
A React boilerplate using CRA5 + Craco, Typescript, Tailwind, Eslint + Prettier, Jest and Husky

Getting Started with Create React App This project was bootstrapped with Create React App. It contains the following additions: Typescript Tailwind St

Marvin de Bruin 20 Dec 7, 2022
Boilerplate developed using Next.Js, Typescript, Styled Components, Jest and React Testing Library

How to start the project This project was started with Next.js Install the dependencies To install all dependencies run yarn install or yarn at the ro

Boost Studio 3 Apr 12, 2022
A scaffold boilerplate including TypeScript, React, Jest and ESLint

A scaffold boilerplate including TypeScript, React, Jest and ESLint

UIUX Lab 2 Feb 17, 2022
An template project made with Next.js, Typescript, Styled Components, Eslint, Prettier, Editorconfig, Storybook, Hygen and Jest + React Testing Library

An template project made with Next.js, Typescript, Styled Components, Eslint, Prettier, Editorconfig, Storybook, Hygen and Jest + React Testing Library

Get In 4 Nov 23, 2022
React Template library with TypeScript, SASS modules, StoryBook and Jest

React Template Library Support Absolute paths, TypeScript, SASS (SCSS) modules, StoryBook and Jest Congrats! You just saved yourself hours of work. Le

Artyom Petrunin 8 Oct 7, 2022