1"use strict";(self.webpackChunkstryker_mutator_github_io=self.webpackChunkstryker_mutator_github_io||[]).push([["7270"],{31683:function(e,t,r){r.r(t),r.d(t,{metadata:function(){return n},default:function(){return l},frontMatter:function(){return i},contentTitle:function(){return c},toc:function(){return u},assets:function(){return a}});var n=JSON.parse('{"id":"stryker-js/guides/react","title":"React","description":"Stryker supports React projects using Jest with both JSX and TSX code.","source":"@site/docs/stryker-js/guides/react.md","sourceDirName":"stryker-js/guides","slug":"/stryker-js/guides/react","permalink":"/docs/stryker-js/guides/react","draft":false,"unlisted":false,"editUrl":"https://github.com/stryker-mutator/stryker-js/edit/master/docs/guides/react.md","tags":[],"version":"current","frontMatter":{"title":"React","custom_edit_url":"https://github.com/stryker-mutator/stryker-js/edit/master/docs/guides/react.md"},"sidebar":"docs","previous":{"title":"NodeJS","permalink":"/docs/stryker-js/guides/nodejs"},"next":{"title":"Svelte","permalink":"/docs/stryker-js/guides/svelte"}}'),s=r(91987),o=r(67008);let i={title:"React",custom_edit_url:"https://github.com/stryker-mutator/stryker-js/edit/master/docs/guides/react.md"},c,a={},u=[{value:"JSX project",id:"jsx-project",level:2},{value:"Configuration",id:"configuration",level:3},{value:"TSX projects",id:"tsx-projects",level:2},{value:"Troubleshooting",id:"troubleshooting",level:2}];function d(e){let t={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.p,{children:"Stryker supports React projects using Jest with both JSX and TSX code."}),"\n",(0,s.jsx)(t.h2,{id:"jsx-project",children:"JSX project"}),"\n",(0,s.jsxs)(t.p,{children:["Recommended stryker packages: ",(0,s.jsx)(t.code,{children:"npm i -D @stryker-mutator/core @stryker-mutator/jest-runner"})]}),"\n",(0,s.jsx)(t.p,{children:"Recommended other packages:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"jest 23.0.0 or higher"}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsxs)(t.p,{children:["After installing the recommended packages, create the ",(0,s.jsx)(t.code,{children:"stryker.config.json"})," file in your repository.\nThe configuration below contains a good starting point for React projects.\nYou may have to change some paths like the ",(0,s.jsx)(t.a,{href:"/docs/stryker-js/configuration#mutate-string",children:"mutate"})," array."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "testRunner": "jest",\n "jest": {\n "projectType": "create-react-app"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h2,{id:"tsx-projects",children:"TSX projects"}),"\n",(0,s.jsx)(t.p,{children:"For projects using TypeScript and TSX, you can follow the JSX guide but with a few differences:"}),"\n",(0,s.jsxs)(t.p,{children:["Recommended stryker packages: ",(0,s.jsx)(t.code,{children:"npm i -D @stryker-mutator/core @stryker-mutator/jest-runner @stryker-mutator/typescript-checker"})]}),"\n",(0,s.jsx)(t.p,{children:"Configuration:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "testRunner": "jest",\n "jest": {\n "projectType": "create-react-app"\n },\n "checkers": ["typescript"],\n "tsconfigFile": "tsconfig.json"\n}\n'})}),"\n",(0,s.jsx)(t.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,s.jsxs)(t.p,{children:["Please take a look at the ",(0,s.jsx)(t.a,{href:"/docs/stryker-js/troubleshooting",children:"troubleshooting page"})," when you run into any problems setting up StrykerJS."]})]})}function l(e={}){let{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},67008:function(e,t,r){r.d(t,{R:function(){return i},x:function(){return c}});var n=r(71763);let s={},o=n.createContext(s);function i(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.