style: add missing file titles (#1076)

Author: mrazauskas

docs/angular-testing-library/examples.mdx

@@ -9,9 +9,7 @@ sidebar_label: Examples
 > or follow the
 > [guided example](https://timdeschryver.dev/blog/getting-the-most-value-out-of-your-angular-component-tests)
 
-counter.component.ts
-
-```typescript
+```ts title="counter.component.ts"
 @Component({
   selector: 'counter',
   template: `
@@ -33,9 +31,7 @@ export class CounterComponent {
 }
 ```
 
-counter.component.spec.ts
-
-```typescript
+```ts title="counter.component.spec.ts"
 import {render, screen, fireEvent} from '@testing-library/angular'
 import {CounterComponent} from './counter.component.ts'
 

docs/bs-react-testing-library/examples.mdx

@@ -11,9 +11,7 @@ You can find more bs-react-testing-library examples at
 
 ## React Testing Library
 
-```reason
-/* Component_test.re */
-
+```reason title="Component_test.re"
 open Jest;
 open Expect;
 open ReactTestingLibrary;
@@ -37,8 +35,7 @@ with typings and creating events.
 
 ### getByText
 
-```reason
-/* __tests__/example_test.re */
+```reason title="__tests__/example_test.re"
 open Jest;
 open DomTestingLibrary;
 open Expect;

docs/cypress-testing-library/intro.mdx

@@ -18,8 +18,8 @@ npm install --save-dev cypress @testing-library/cypress
 
 Add this line to your project's `cypress/support/commands.js`:
 
-```
-import '@testing-library/cypress/add-commands';
+```js
+import '@testing-library/cypress/add-commands'
 ```
 
 You can now use all of `DOM Testing Library`'s `findBy`, `findAllBy`, `queryBy`

docs/dom-testing-library/api-custom-queries.mdx

@@ -21,8 +21,7 @@ to use a different data-attribute. (Note: test files would import
 > Custom queries are different than
 > [custom render](react-testing-library/setup.mdx#custom-render) methods.
 
-```js
-// test-utils.js
+```js title="test-utils.js"
 const domTestingLib = require('@testing-library/dom')
 const {queryHelpers} = domTestingLib
 

docs/dom-testing-library/example-intro.mdx

@@ -4,8 +4,7 @@ title: Example
 sidebar_label: Example
 ---
 
-```javascript
-// src/__tests__/example.js
+```js title="src/__tests__/example.js"
 // query utilities:
 import {
   getByLabelText,

docs/ecosystem-bs-jest-dom.mdx

@@ -30,9 +30,7 @@ full list of available matchers.
 
 ## Example
 
-```reason
-/* A_test.re */
-
+```reason title="A_test.re"
 open Jest;
 open JestDom;
 open ReactTestingLibrary;

docs/ecosystem-jest-native.mdx

@@ -12,7 +12,7 @@ for Jest.
 npm install --save-dev @testing-library/jest-native
 ```
 
-```javascript
+```jsx
 const {queryByTestId} = render(
   <View>
     <View testID="not-empty">

docs/marko-testing-library/setup.mdx

@@ -32,9 +32,7 @@ version of all modules as mentioned above.
 To test components rendered on the client-side, be sure to enable both the
 `browser` option and the preset and you are good to go!
 
-**jest.config.js**
-
-```javascript
+```js title="jest.config.js"
 module.exports = {
   preset: '@marko/jest/preset/browser',
 }
@@ -43,9 +41,7 @@ module.exports = {
 For testing components rendered on the server-side we can instead use
 `@marko/jest/preset/node` as our jest preset.
 
-**jest.config.js**
-
-```javascript
+```js title="jest.config.js"
 module.exports = {
   preset: '@marko/jest/preset/node',
 }
@@ -56,9 +52,7 @@ A Jest configuration can also have multiple
 which we can use to create a combined configuration for server-side tests, and
 client-side tests, like so:
 
-**jest.config.js**
-
-```javascript
+```js title="jest.config.js"
 module.exports = {
   projects: [
     {

docs/react-native-testing-library/example-intro.mdx

@@ -4,7 +4,7 @@ title: Example
 sidebar_label: Example
 ---
 
-```javascript
+```jsx
 import React from 'react'
 import {Button, Text, TextInput, View} from 'react-native'
 import {fireEvent, render, waitFor} from '@testing-library/react-native'

docs/react-native-testing-library/setup.mdx

@@ -21,14 +21,12 @@ with this file in all your imports. See
 [below](#configuring-jest-with-test-utils) for a way to make your test util file
 accessible without using relative paths.
 
-```diff
-// my-component.test.js
+```diff title="my-component.test.js"
 - import { render, fireEvent } from '@testing-library/react-native';
 + import { render, fireEvent } from '../test-utils';
 ```
 
-```js
-// test-utils.js
+```jsx title="test-utils.js"
 import {render} from '@testing-library/react-native'
 import {ThemeProvider} from 'my-ui-lib'
 import {TranslationProvider} from 'my-i18n-lib'
@@ -63,14 +61,12 @@ Jest `moduleDirectories` option.
 This will make all the `.js` files in the test-utils directory importable
 without `../`.
 
-```diff
-// my-component.test.js
+```diff title="my-component.test.js"
 - import { render, fireEvent } from '../test-utils';
 + import { render, fireEvent } from 'test-utils';
 ```
 
-```diff
-// jest.config.js
+```diff title="jest.config.js"
 module.exports = {
   moduleDirectories: [
     'node_modules',

docs/react-testing-library/api.mdx

@@ -122,7 +122,7 @@ for common data providers. See [setup](setup.mdx#custom-render) for examples.
 Queries to bind. Overrides the default set from `DOM Testing Library` unless
 merged.
 
-```js
+```jsx
 // Example, a function to traverse table contents
 import * as tableQueries from 'my-table-query-library'
 import {queries} from '@testing-library/react'

docs/react-testing-library/example-intro.mdx

@@ -8,8 +8,7 @@ sidebar_label: Example
 
 See the following sections for a detailed breakdown of the test
 
-```jsx
-// __tests__/fetch.test.js
+```jsx title="__tests__/fetch.test.jsx"
 import React from 'react'
 import {rest} from 'msw'
 import {setupServer} from 'msw/node'
@@ -169,9 +168,7 @@ expect(screen.getByRole('button')).not.toBeDisabled()
 
 ### System Under Test
 
-fetch.js
-
-```jsx
+```jsx title="fetch.jsx"
 import React, {useState, useReducer} from 'react'
 import axios from 'axios'
 

docs/react-testing-library/faq.mdx

@@ -15,7 +15,7 @@ TL;DR:
 
 In summary:
 
-```javascript
+```jsx
 import React from 'react'
 import {render, fireEvent} from '@testing-library/react'
 
@@ -109,7 +109,7 @@ to, then try to use
 One case where I've found mocking to be especially useful is for animation
 libraries. I don't want my tests to wait for animations to end.
 
-```javascript
+```jsx
 jest.mock('react-transition-group', () => {
   const FakeTransition = jest.fn(({children}) => children)
   const FakeCSSTransition = jest.fn(props =>

docs/react-testing-library/setup.mdx

@@ -114,6 +114,8 @@ export {customRender as render}
 > [#169](https://github.com/testing-library/react-testing-library/issues/169)
 > and the workaround below.
 
+<details>
+
 <summary>Workaround for Babel 6</summary>
 
 You can use CommonJS modules instead of ES modules, which should work in Node:
@@ -133,6 +135,8 @@ module.exports = {
 }
 ```
 
+</details>
+
 ### Add custom queries
 
 > **Note**
@@ -198,8 +202,7 @@ render method:
 
   <TabItem value="jsx">
 
-```jsx title="test-utils.js"
-// test-utils.js
+```js title="test-utils.js"
 import {render, queries} from '@testing-library/react'
 import * as customQueries from './custom-queries'
 
@@ -217,8 +220,7 @@ export {customRender as render}
 
   <TabItem value="tsx">
 
-```tsx title="test-utils.ts"
-// test-utils.ts
+```ts title="test-utils.ts"
 import {render, queries, RenderOptions} from '@testing-library/react'
 import * as customQueries from './custom-queries'
 import {ReactElement} from 'react'
@@ -272,7 +274,7 @@ module.exports = {
 If you're using TypeScript, merge this into your `tsconfig.json`. If you're
 using Create React App without TypeScript, save this to `jsconfig.json` instead.
 
-```diff title="tsconfig.json"
+```json title="tsconfig.json"
 {
   "compilerOptions": {
     "baseUrl": "src",
@@ -398,14 +400,14 @@ To enable automatic cleanup in Mocha's watch mode, add a cleanup
 [root hook](https://mochajs.org/#root-hook-plugins). Create a
 `mocha-watch-cleanup-after-each.js` file with the following contents:
 
-```
-const { cleanup } = require("@testing-library/react");
+```js title="mocha-watch-cleanup-after-each.js"
+const {cleanup} = require('@testing-library/react')
 
 exports.mochaHooks = {
   afterEach() {
-    cleanup();
+    cleanup()
   },
-};
+}
 ```
 
 And register it using mocha's `-r` flag:

docs/svelte-testing-library/setup.mdx

@@ -79,7 +79,7 @@ with any testing framework and runner you're comfortable with.
     [jest-dom](https://github.com/testing-library/jest-dom) to add handy
     assertions to Jest
 
-    6.1 Install jest-dom
+    6.1 Install `jest-dom`
 
     ```
     npm install --save-dev @testing-library/jest-dom

docs/testcafe-testing-library/intro.mdx

@@ -26,7 +26,7 @@ npm install --save-dev testcafe @testing-library/testcafe
 `testcafe-testing-library` provides custom Selectors allowing you to query the
 dom.
 
-Add the following to your .testcaferc.json file:
+Add the following to your `.testcaferc.json` file:
 
 ```json
   "clientScripts": [
@@ -37,7 +37,9 @@ Add the following to your .testcaferc.json file:
 You can now import `screen` which has all the get[All]By*, query[All]By*,
 find[All]By\* selectors that you can use in your tests.
 
-`import { screen } from '@testing-library/testcafe'`
+```js
+import {screen} from '@testing-library/testcafe'
+```
 
 [See `Queries` for reference](queries/about.mdx)