From dc726646ecf343e31a270b1ba193fefbe15f0d07 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Tue, 17 May 2022 23:31:33 +0700 Subject: [PATCH] docs: Add skeleton for cra post --- .../index.md | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 website/blog/2022-05-18-first-class-support-cra/index.md diff --git a/website/blog/2022-05-18-first-class-support-cra/index.md b/website/blog/2022-05-18-first-class-support-cra/index.md new file mode 100644 index 00000000..4a01e299 --- /dev/null +++ b/website/blog/2022-05-18-first-class-support-cra/index.md @@ -0,0 +1,33 @@ +--- +slug: first-class-support-cra +title: First class support for Create React App +authors: [nvh95] +tags: [jest-preview, developer-experience, create-react-app] +# TODO To update +# image: /img/automatic-mode.png +--- + +CRA is well known for bootstrapping a React App. It hides the complexity of bundling and configuration over `react-scripts`. However, in some scenarios, it's very hard to customize CRA for a specific purpose. Make Jest Preview works seamlessly with CRA is an example. Currently, there is no way to customize CRA's `jest.config.js` file easily. So, Jest Preview bundles a few CLIs to make integrating Jest Preview to CRA easier. + +Option 1: Use codemod: + +- Run this CLI `jest-preview config-cra-test` + +Option 2: Configure manually + +1. Create `jest.config.js` + +- Create `jest.config.js` with following content: + +1. Update test script in `package.json` + +```diff +{ + "scripts": { +- "test": "react-scripts test" ++ "test": "node scripts/test.js" + } +} +``` + +1. Create test script